拖拽布局插件SortableJS

Sortable是一个独立的JS插件,不需要jquery,Sortable非常轻量,压缩后只有2KB,适用现代浏览器与移动设备。使用Sortable可以轻松实现鼠标拖拽排序,让用户操作更方便,具有极强的体验性。

很简单的一个拖拽布局插件

DEMO地址

简单使用

<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]

请使用原生方式获取

  • 1.本站主要是为了记录工作、学习中遇到的问题,可能由于本人技术有限,有些不正确的地方,仅供参考。
  • 2.本站中会转载我认为有用的博客文章,添加一些外链网站地址,但这些博客文章、论坛和网站上的内容和我没有关系,不代表我的意见,请网友自己多注意辨别。
  • 3.本站中转载文章会写明来源(点击下方链接按钮即可),感谢原作者的辛苦写作,如果有异议,及时联系我处理,谢谢!
  • 4.欢迎指出有问题的地方,我会尽快修正,谢谢!

系统由 Nginx + Next.js + React + Node + TailWindCss 驱动

沪ICP备20021316号