如何使用jQuery Sortable组件阻止可拖拽元素落入指定排序区域？

可以通过jQuery Sortable的分组配置或拖拽移动回调两种方式实现，以下是具体代码示例：

方式一：通过group属性分组限制 #

给拖拽元素和放置区设置分组标识，让A仅能在指定分组的放置区（C）内拖拽：

<!-- 拖拽元素 -->
<div class="drag-item drag-a">组件A</div>
<div class="drag-item drag-b">组件B</div>

<!-- 放置区域 -->
<div class="drop-area drop-c">区域C</div>
<div class="drop-area drop-d">区域D</div>

// 初始化拖拽组件A，指定分组为group1，仅能放入同分组的放置区
Sortable.create(document.querySelector('.drag-a'), {
  group: {
    name: 'group1',
    pull: true, // 若需要复制拖拽元素可改为'clone'
    put: ['group1'] // 仅接受同分组的元素
  }
});

// 初始化拖拽组件B，指定分组为group2，可放入同分组的放置区
Sortable.create(document.querySelector('.drag-b'), {
  group: {
    name: 'group2',
    pull: true,
    put: ['group2']
  }
});

// 初始化放置区C，指定分组为group1
Sortable.create(document.querySelector('.drop-c'), {
  group: {
    name: 'group1',
    pull: false, // 禁止从放置区拖拽元素出去
    put: ['group1']
  }
});

// 初始化放置区D，指定分组为group2
Sortable.create(document.querySelector('.drop-d'), {
  group: {
    name: 'group2',
    pull: false,
    put: ['group2']
  }
});

方式二：通过onMove回调灵活控制 #

如果需要更复杂的规则（比如B可以放入C和D，但A仅能放入C），可以用onMove回调判断拖拽元素和目标区域，返回false阻止放置：

// 初始化所有拖拽元素
Sortable.create(document.querySelector('.drag-item'), {
  group: {
    name: 'common',
    pull: true
  },
  onMove: function(evt) {
    // evt.dragged：当前拖拽的元素
    // evt.to：目标放置区域
    const isDragA = evt.dragged.classList.contains('drag-a');
    const isDropD = evt.to.classList.contains('drop-d');
    
    // 如果拖拽的是A且目标是D，阻止放置
    if (isDragA && isDropD) {
      return false;
    }
    return true; // 其他情况允许放置
  }
});

// 初始化放置区C和D
Sortable.create(document.querySelector('.drop-c'), {
  group: {
    name: 'common',
    put: true
  }
});

Sortable.create(document.querySelector('.drop-d'), {
  group: {
    name: 'common',
    put: true
  }
});

两种方式的区别：

• 分组方式适合规则简单的场景，配置更直观
• onMove回调适合复杂规则，能根据动态条件判断是否允许放置

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