zoukankan      html  css  js  c++  java
  • jQuery拖动图片自定义排序代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>jQuery拖动图片自定义排序代码 </title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

    <style>
    body{background-color: #232323}
    h3{text-align: center;color: #606060}
    .container{
    900px;
    margin: 50px auto;
    }
    .demo li {
    250px;
    height: 180px;
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;list-style-type: none;
    }
    .demo li>img {
    250px;
    height: 180px;
    cursor: pointer;

    }
    </style>

    </head>
    <body >

    <h3>拖动图片进行排序</h3>
    <div class="container">
    <ul class="demo" >
    <!--<li><img src="images/a1.png"></li>-->
    <!--<li><img src="images/a2.png"></li>-->
    <!--<li><img src="images/a3.png"></li>-->
    <!--<li><img src="images/a4.png"></li>-->
    <!--<li><img src="images/a5.png"></li>-->
    <!--<li><img src="images/a6.png"></li>-->
    </ul>
    </div>

    <!-- 页面js -->

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.dragsort-0.5.1.min.js"></script>
    <script>

    $.ajax({
    url:'zzzzzzzz' ,
    type: 'get',
    dataType: '',
    data: {},
    success: function(res){
    var data=res.details.data;
    var html ='';
    for(var i=0;i<data.length;i++){
    html +='<li><img src="'+data[i].image_src+'"></li> ';
    }
    $('.demo').append(html);
    }
    })
    </script>
    <script type="text/javascript">

    $(function() {
    try{
    $(".demo").dragsort({
    dragSelector: "li",
    dragBetween: true ,
    dragEnd:function(){

    console.log('此处可放拖动结束后的方法。')
    }
    });
    }catch(e){
    }
    });
    </script>

    </div>
    </body>
    </html>
  • 相关阅读:
    openswitch db files
    openstack中虚拟机和其网络的联系方法 instance and network
    python操作db2和mysql ,ibm_db
    yum安装mariadb
    python 连接 db2
    db2操作 连接、备份、恢复db2
    su su
    linux 后台运行进程 fg bg ctrl+z nohup
    mysql 命令行
    IDEA-使用技巧
  • 原文地址:https://www.cnblogs.com/chengyalin/p/9590642.html
Copyright © 2011-2022 走看看