如何使用Sortable.js阻止带有disabled类的元素移动？

要让带有disabled类的列表项在拖拽时保持固定（既不能被拖拽，也不会被其他项推动移位），可以借助SortableJS的两个核心配置完成：

1. filter 配置：指定需要过滤的元素选择器，这里设为.disabled，直接禁止这类元素被拖拽。
2. onMove 钩子函数：拖拽移动过程中判断目标位置是否是禁用项，若是则阻止放置，避免禁用项被推动移位。

完整代码示例 #

HTML 结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>固定禁用项的拖拽列表</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
  <script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
</head>
<body>
  <!-- 带拖拽手柄的列表 -->
  <div id="listWithHandle" class="list-group">
    <div class="list-group-item">
      <span class="badge">14</span>
      <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
      拖拽手柄拖动我
    </div>
    <div class="list-group-item">
      <span class="badge">2</span>
      <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
      也可以选中文本
    </div>
    <div class="disabled list-group-item">
      <span class="badge">1</span>
      <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
      应固定在索引(2)位置
    </div>
    <div class="list-group-item">
      <span class="badge">2</span>
      <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
      也可以选中文本
    </div>
    <div class="disabled list-group-item">
      <span class="badge">1</span>
      <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
      应固定在索引(4)位置
    </div>
    <div class="list-group-item">
      <span class="badge">2</span>
      <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
      也可以选中文本
    </div>
    <div class="list-group-item">
      <span class="badge">2</span>
      <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
      也可以选中文本
    </div>
    <div class="list-group-item">
      <span class="badge">2</span>
      <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
      也可以选中文本
    </div>
  </div>
</body>
</html>

JavaScript 配置

// 初始化带手柄的拖拽列表
Sortable.create(listWithHandle, {
  handle: '.glyphicon-move', // 指定触发拖拽的手柄元素
  animation: 150, // 拖拽动画时长
  filter: ".disabled", // 过滤禁用项，禁止其被拖拽
  onMove: function (evt) {
    // 拖拽移动时，判断目标元素是否为禁用项，是则阻止放置
    return evt.related.className.indexOf('disabled') === -1;
  }
});

关键说明 #

• filter: ".disabled"：直接禁用带有该类的元素的拖拽功能，用户无法拖动这些项。
• onMove 函数：当拖拽其他项试图靠近禁用项时，会检查目标位置的元素是否为禁用项，返回false时阻止放置动作，避免禁用项被推动移位。

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