拖拽插件SortableJS

在项目中,经常会遇到一些涉及到拖拽的需求,github上面有一个开源的SortableJS的插件,支持Vue,React,Angular等多种框架,实现效果很好,基本可以满足大部分的需求,下面就第一次在jquery中的使用做个简单的demo记录。

  1. 引入文件Sortable.min.js
  2. 指定包裹容器的id
  3. 根据api开始创建使用即可

分享图片

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Sortable. No jQuery.</title> <link href="st/app.css" rel="stylesheet" type="text/css" /><!--可去掉,不影响功能--> </head> <body> <div class="container" style="height: 520px"> <div data-force="30" class="layer block" style="left: 14.5%; top: 0; width: 37%"> <div class="layer title">List A</div> <ul id="foo" class="block__list block__list_words"> <li>1aaaбегемот测试</li> <li>2корм</li> <li>3антон</li> <li>4сало</li> <li>5железосталь</li> <li>6валик</li> <li>7кровать</li> <li>8краб</li> </ul> </div> </div> <script src="Sortable.min.js"></script> <script> Sortable.create(document.getElementById(‘foo‘), { animation: 150, store: {//缓存到localStorage get: function(sortable) { var order = localStorage.getItem(sortable.options.group); return order ? order.split(‘|‘) : []; }, set: function(sortable) { var order = sortable.toArray(); localStorage.setItem(sortable.options.group, order.join(‘|‘)); } }, 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(‘onStart.foo:‘, [evt.item, evt.from]); }, onEnd: function(evt) { console.log(‘onEnd.foo:‘, [evt.item, evt.from]); } }); </script> </body> </html>

官方文档地址:https://github.com/SortableJS/Sortable
demo演示地址:http://sortablejs.github.io/Sortable/

 

 

.

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在,都有一个你没有努力的曾经。
公众号推荐
   一个历史类的公众号,欢迎关注
一两拨千金