zoukankan      html  css  js  c++  java
  • jquery ui实现图片拖拽排序

    这几天公司后台改版,老板让实现一个拖拽图片实现排序的效果。本人水平一般,这个效果感觉好难!小公司一枚,也没高手。

    无可奈何之下,只得求助度娘,搜了一个下午也没发现太好的插件或代码。回到桌面,看到了JQUERY UI刚用这个实现了一个拖拽效果。随便打开demos。发现了这个sortable文件夹,打开后喜极而泣。真是众里寻他千百度,废话不说了,上代码。下面的是完成后

    效果。

    HTML如下:

    <div class="table_row" id="sortable" style="z-index:0">

    <div class="order_img or_active"> <img src="images/cover.jpg" width="169" height="113" />
    <div class="mark_o png">1</div>
    </div>

    <div class="order_img or_active"> <img src="images/cover.jpg" width="169" height="113" />
    <div class="mark_o png">1</div>
    </div>

    </div>

    JS如下:

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.ui.core.js"></script>
    <script src="js/jquery.ui.widget.js"></script>
    <script src="js/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="js/jquery.ui.draggable.js"></script>
    <script src="js/jquery.ui.sortable.js"></script>

    <script type="text/javascript">
    $(function(){
    $("#sortable" ).sortable({ containment: "#sortable" , opacity: 0.8});
    $("#sortable" ).disableSelection();
    $('#sortable').sortable({ stop: function(event, ui) {

    //这一段是自己网站需要,可以不管,stop是拖拽结束后触发的事件,看自己需要,具体详细可参照JQUERY UI的API
    $("#sortable .order_img").each(function(index){
    $(this).children(".mark_o").html(index+1);
    })


    } });

    });
    </script>

    最后感慨下,JQUERY真是不负锋利之名。

  • 相关阅读:
    8.11 hdu 多校第五场补题
    8.10 trie树模板
    8.6 edu25 ,577#div2 CF补题(二分 ,dp 与 贪心
    8.4 POJ 3237 (树链剖分+线段树
    8.4 poj 2763 Housewife Wind (树链剖分边权处理
    8.4 树链剖分
    8.3 树链剖分
    2019 hdu 第四场补题 (2
    2019 hdu 第四场补题 (1 ,签到题
    51NOD 1137 矩阵乘法
  • 原文地址:https://www.cnblogs.com/kongxs/p/3037722.html
Copyright © 2011-2022 走看看