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]);
           }
      });

 

js 拖拽

上一篇:jquery: 计算图片大小,按比例缩放


下一篇:React.createElement 与 JSX