返回

JS 拖放库:HTML5 API vs SortableJS 轻松实现拖拽

javascript

JavaScript 拖放库:简易上手指南

实现网页元素的拖放重排功能是常见需求。直接操作 DOM API 虽能完成,但代码较为复杂,且易出错。 使用专门的拖放库能大幅简化开发,同时兼顾跨浏览器兼容性和性能优化。 此处讨论若干 JavaScript 拖放库, 帮助你选择合适的解决方案。

HTML5 原生拖放 API

浏览器自身就支持拖放操作。该 API 的优势在于不依赖外部库,轻量且性能优异。 你需要理解几个关键的事件:dragstartdragoverdropdragend,它们分别对应拖拽开始、元素拖动经过、元素释放和拖动结束。

  • 实现步骤:

    1. 为可拖拽元素添加 draggable="true" 属性。
    2. 监听 dragstart 事件,获取被拖拽元素数据。
    3. 监听目标容器 dragover 事件,阻止默认行为(允许放置)。
    4. 监听目标容器 drop 事件,获取拖拽元素数据,实现元素位置更新。
    5. 监听 dragend事件,重置拖拽状态。
  • 代码示例:

     <div id="container">
      <div class="item" draggable="true" id="item1">Item 1</div>
      <div class="item" draggable="true" id="item2">Item 2</div>
      <div class="item" draggable="true" id="item3">Item 3</div>
     </div>
    
    <style>
     .item{
       padding:10px;
       border: 1px solid black;
       margin: 5px;
     }
     </style>
    
     <script>
        const container = document.getElementById('container');
         let draggedItem = null;
         //添加一个class  方便样式显示
        const addDragClass =  (el,val)=>el.classList[val ? 'add' :'remove']("dragging");
    
    
        container.addEventListener('dragstart', (event) => {
          draggedItem = event.target;
         addDragClass(draggedItem,true)
          event.dataTransfer.setData('text/plain', event.target.id);
          });
    
    
          container.addEventListener('dragover', (event) => {
          event.preventDefault(); // 允许放置
           });
    
    
           container.addEventListener('drop', (event) => {
                event.preventDefault();
                if(event.target.id && event.target.id!==draggedItem.id)
                   {
                 const dropTarget = event.target;
                    //swap element from dropped on top
                  container.insertBefore(draggedItem, dropTarget);
                   }
    
             });
    
        container.addEventListener('dragend',(event)=>{
         addDragClass(event.target,false)
    
         draggedItem= null
          })
    
     </script>
    

    此代码实现了一个简单的可拖拽元素列表。你只需要添加相应的CSS样式进行美化。 原生 API 学习曲线低,适合简单的拖拽场景,无需额外引入第三方依赖。

SortableJS 拖放库

SortableJS 是一款轻量级,功能强大的 JavaScript 拖放库。 它的特点是灵活,支持触摸设备和各种现代浏览器。它可以让你轻松地创建可排序的列表和网格。它提供简洁的 API ,允许自定义拖放的行为。

  • 安装方式:

    使用 CDN 引入或使用 npm 包管理器安装。

     npm install sortablejs
    
  • 使用步骤:

    1. 引入 SortableJS 库。
    2. 实例化 Sortable 对象,传递要拖拽元素的父容器以及相关配置项。
    3. 根据需要使用 onAddonUpdateonRemoveonMove 等回调函数实现自定义逻辑。
  • 代码示例:

        <div id="sortable-list">
            <div class="item">Item 1</div>
            <div class="item">Item 2</div>
            <div class="item">Item 3</div>
            <div class="item">Item 4</div>
        </div>
        <style>
         #sortable-list{
                border:1px solid black;
            padding:5px;
            width: 200px
            }
         .item{
         padding:10px;
         margin:5px;
         background:#eef
         }
    
         </style>
         <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    
        <script>
         const sortableList = document.getElementById('sortable-list');
         new Sortable(sortableList, {
            animation:150, //animation duration while dragging
           onEnd:()=>{
           // this is fired every time the user has rearranged
                }
    
         });
         </script>
    
    
上述代码创建了一个使用SortableJS 实现的可排序列表。 `onEnd`  函数是该库提供回调之一,可以在排序结束时进行某些额外操作,例如更新数据库。 此库对于更复杂或自定义的排序功能是良好的选择。

### 选择合适的方案

原生 API 更适合简单的拖放交互,不需要引入额外库。如果需要更强大的功能,例如元素拖拽、克隆等高级功能,或者需要解决复杂的兼容问题,则应该考虑SortableJS 或其他类似的第三方库。根据项目复杂性和需求选择合适的方案才是上策。 选择任何一个都要注重其API 的理解,在阅读官方文档后尝试各种参数达到目标效果。