如何指定jQuery UI Sortable的可拖拽区域？

你遇到的这个问题很常见，jQuery UI Sortable默认会把整个可排序元素（也就是你的每个区块）都作为拖拽触发区域，所以点击地图的时候也会触发排序。要实现仅通过顶部图标拖拽排序，只需要利用Sortable的**handle配置项**就可以了，它能指定只有特定元素被拖拽时才触发排序行为。

具体步骤： #

1. 首先给你的拖拽图标加一个专属类名，比如假设你图标元素的类是drag-handle（如果已经有类名就直接用现有的）：

   <!-- 示例：每个区块内的图标结构 -->
   <div class="item">
     <span class="drag-handle">🔽</span> <!-- 这个就是拖拽手柄 -->
     <div class="map-container">...</div> <!-- 你的地图区域 -->
   </div>
   

2. 修改你现有的Sortable初始化代码，添加handle配置项，指定刚才的图标类名：

   $('.itemsWrapper').sortable({
     startPos: null,
     endPos: null,
     // 新增：指定仅.drag-handle元素可触发拖拽
     handle: '.drag-handle',
     start: function(event, ui) {
       this.startPos = ui.item.index();
     },
     stop: function(event, ui) {
       this.endPos = ui.item.index();
       __this.onReorder.emit({ from: this.startPos, to: this.endPos });
     }
   }).disableSelection();
   

原理说明： #

• 当你设置handle: '.drag-handle'后，Sortable只会监听这个指定元素的拖拽事件，点击或拖拽区块内的其他区域（比如你的地图）时，不会触发排序行为，完美符合你的需求。
• 要确保drag-handle元素是每个可排序子项（也就是每个区块）的直接后代，这样每个区块都能通过自己的图标来拖拽排序。

如果你的图标是动态生成的，后续新增区块时，记得调用$('.itemsWrapper').sortable('refresh')来让Sortable识别新的手柄元素，不过如果是初始化时就存在的区块，直接按上面的代码修改就可以正常工作了。

内容的提问来源于stack exchange，提问作者user3006967