在项目中，经常会遇到一些涉及到拖拽的需求，github上面有一个开源的SortableJS的插件，支持Vue，React，Angular等多种框架，实现效果很好，基本可以满足大部分的需求，下面就第一次在jquery中的使用做个简单的demo记录。
- 引入文件Sortable.min.js
- 指定包裹容器的id
- 根据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/
.
原文地址：https://www.cnblogs.com/jianxian/p/11726999.html
时间： 2024-08-29 16:32:58