如何通过按钮实现jQuery Sortable表格<tr>拖拽排序

要实现仅通过指定按钮触发表格行的拖拽排序，只需在jQuery UI Sortable的配置中添加handle选项明确拖拽触发元素，同时优化按钮交互避免默认行为干扰即可。

关键修改点 #

• 通过handle: ".draggable"指定仅带.draggable类的按钮能触发拖拽，整行其他区域点击不会触发拖拽
• 给拖拽按钮绑定mousedown事件阻止默认行为，避免按钮的默认点击动作（如表单提交）干扰拖拽流程

修改后的完整代码 #

JavaScript

// 初始化表格行排序，仅允许通过.draggable按钮触发拖拽
$("#myTable tbody").sortable({
  helper: 'clone',
  handle: ".draggable", // 指定拖拽触发元素
  start: function(event, ui) {
    ui.item.addClass("dragging");
  },
  stop: function(event, ui) {
    ui.item.removeClass("dragging");
  },
});

// 阻止拖拽按钮的默认mousedown行为，避免干扰拖拽
$(".draggable").on("mousedown", function(e) {
  e.preventDefault();
});

HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<table id="myTable">
  <thead></thead>
  <tbody>
    <tr>
      <td>Name 1</td>
      <td>Item 1</td>
      <td><button class="draggable">Drag</button></td>
    </tr>
    <tr>
      <td>Name 2</td>
      <td>Item 2</td>
      <td><button class="draggable">Drag</button></td>
    </tr>
    <tr>
      <td>Name 3</td>
      <td>Item 3</td>
      <td><button class="draggable">Drag</button></td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>

效果说明 #

现在只有点击每行的Drag按钮时，才能触发对应表格行的拖拽排序操作；点击表格行内的其他区域，不会触发拖拽行为，完全符合需求。

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