sortable.js中文网
- npm安装方式
$ npm install sortablejs --save
- Bower安装方式
$ bower install --save sortablejs
- UMD 安装方式
<script src="https://www.itxst.com/package/sortable/sortable.min.js"></script>
- 官方的 Demo
<div id="mSortable">
<div data-id="1">item 1</div>
<div data-id="2">item 2</div>
<div data-id="3">item 3</div>
</div>
<script>
//获取对象
var el = document.getElementById('mSortable');
//设置配置
var ops = {
animation: 1000,
//拖动结束
onEnd: function(evt) {
console.log(evt);
//获取拖动后的排序
var arr = sortable.toArray();
console.log(JSON.stringify(arr));
},
};
//初始化
var sortable = Sortable.create(el, ops);
</script>
- 实际项目中应用
<div id="itxst"></div>
<button type="button" id="btn">发送</button>
<script>
var btn = document.getElementById("btn");
// 原数组
var data = [];
// 定义一个空数组，用于把排序后的数据直接覆盖原数组
var newData = [];
// 原数组中添加数据
for (var i = 0; i < 10; i++) {
data.push({
id: i,
name: "Panda" + i
})
}
//获取对象
var el = document.getElementById('itxst');
// 动态往页面中添加节点元素
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var divItem = document.createElement("div");
divItem.innerHTML = dataItem.name;
divItem.setAttribute("data-id", dataItem.id);
el.append(divItem);
}
//设置配置
var ops = {
animation: 1000,
//拖动结束
onEnd: function(evt) {
console.log(evt);
//获取拖动后的排序
var arr = sortable.toArray();
console.log("排序后的索引 >>", arr);
// 遍历原数组，往新数组中push排序后的数据
for (var i = 0; i < data.length; i++) {
newData.push(data[arr[i]])
}
// 覆盖掉原数组
data = newData;
console.log("结束后的数据", data);
},
};
//初始化
var sortable = Sortable.create(el, ops);
btn.addEventListener("click",function() {
console.log("最终发送后台的数据 >>", data)
})
</script>
- 原数据
- 拖动结束后的排序索引
- 拖动结束后的数据
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/158658.html
