zoukankan      html  css  js  c++  java
  • js 拖拽

    引入js:  http://www.sortablejs.com/index.html 

    HTML:

    <div class="menu-AS" id="AS">
        <a href="javascript:;">11</a>
        <a href="javascript:;">22</a>
        <a href="javascript:;">33</a>
        <a href="javascript:;">44</a>
        <a href="javascript:;">55</a>
        <a href="javascript:;">66</a>
    </div>

    Js:两种方式都可用。

    <script src="js/Sortable.min.js"></script>
    
    var sortable = new Sortable(AS, { });
    
    
    Sortable.create(document.getElementById('AS'), {
               animation: 150, //动画参数
               onAdd: function (evt) {   //拖拽时候添加有新的节点的时候发生该事件
                    console.log('onAdd.foo:', [evt.item, evt.from]);
               },
               onUpdate: function (evt) {  //拖拽更新节点位置发生该事件
                    console.log('onUpdate.foo:', [evt.item, evt.from]);
               },
               onRemove: function (evt) {   //删除拖拽节点的时候促发该事件
                    console.log('onRemove.foo:', [evt.item, evt.from]);
               },
               onStart: function (evt) {  //开始拖拽出发该函数
                    console.log('onStart.foo:', [evt.item, evt.from]);
               },
               onSort: function (evt) {  //发生排序发生该事件
                    console.log('onSort.foo:', [evt.item, evt.from]);
               },
               onEnd: function (evt) { //拖拽完毕之后发生该事件
                    console.log('onEnd.foo:', [evt.item, evt.from]);
               }
          });
    我就是我,记性不好,那就用写的吧。
  • 相关阅读:
    xshell入门及Linux常用命令
    C++之vector
    c++ 之 string
    引用 与 指针
    关于时间复杂度的计算以及相关概念
    位运算
    thymeleafDemo
    面试总结
    关于mvvm原理实现,模拟vue(3)-----发布订阅
    关于mvvm原理实现,模拟vue(2)-----模板编译
  • 原文地址:https://www.cnblogs.com/rainy0496/p/13299119.html
Copyright © 2011-2022 走看看