拖拽布局插件SortableJS
Sortable是一个独立的JS插件,不需要jquery,Sortable非常轻量,压缩后只有2KB,适用现代浏览器与移动设备。使用Sortable可以轻松实现鼠标拖拽排序,让用户操作更方便,具有极强的体验性。
很简单的一个拖拽布局插件
简单使用
<ul id="column">
<li>item1</li>
<li>item2</li>
</ul>
var byId = function (id) {
return document.getElementById(id);
};
Sortable.create(byId('column'), {
animation: 150,
filter: '.filtered', //不可拖拽元素
onAdd: function (evt){
console.log('onAdd.bar:', evt.item);
},
onUpdate: function (evt){
console.log('onUpdate.bar:', evt.item);
},
onRemove: function (evt){
console.log('onRemove.bar:', evt.item);
},
onStart:function(evt){
console.log('onStart.foo:', evt.item);
},
onEnd: function(evt){
console.log('onEnd.foo:', evt.item);
}
});
错误提示
如果你使用jquery $('#')可能会报错
Uncaught Sortable: `el` must be HTMLElement, and not [object Object]
请使用原生方式获取