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>
  • 相关阅读:
    如何上载图片到SAP数据库并显示
    ◆◆0如何查看ABAP程序或者数据库表的版本历史
    python中我认为一些重要的东西
    Pytorch使用-1
    大工具-收藏
    大想法-(收藏)
    TODO-深度学习实验
    顺便配置了下vim
    不影响已安装的低版本cuda8及其环境工具条件下安装新版本cuda9
    ConvLSTM-AE for VAD (ICME2017-SIST)
  • 原文地址:https://www.cnblogs.com/chengyalin/p/9590642.html
Copyright © 2011-2022 走看看