jQuery UI拖拽匹配data-id元素异常：ItemLookupCode无法正常匹配求助

嘿，我发现你代码里的问题啦！你现在的逻辑是拿右侧列表第一个li的data-id来和拖拽元素对比，所以只有拖StoreID（data-id=2）到右侧第一个位置时才会匹配，拖ItemLookupCode（data-id=3）的时候，不管你放到右侧哪个位置，代码里取的s1始终是2，自然会触发"no"的提示并取消拖拽。

修复后的代码 #

先看修改后的JavaScript：

$(function() {
  $(".connectedSortable").sortable({
    connectWith: ".connectedSortable",
    update: function(e, ui) {
      // 只处理从左侧列表拖到右侧列表的情况
      if (ui.sender && ui.sender.attr("id") === "sortable1") {
        const draggedItemId = ui.item.attr("data-id");
        // 获取拖拽元素在目标列表中的位置索引
        const targetPositionIndex = ui.item.index();
        // 找到目标列表对应位置的占位元素的data-id
        const targetPlaceholderId = $(this).find("li").eq(targetPositionIndex).attr("data-id");
        
        if (draggedItemId !== targetPlaceholderId) {
          alert("no");
          ui.sender.sortable("cancel");
        }
      }
    }
  }).disableSelection();
});

对应的HTML和CSS保持你的原有代码即可：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<style>
.connectedSortable {
  border: 1px solid #eee;
  width: 142px;
  min-height: 20px;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 0 0;
  float: left;
  margin-right: 10px;
}
#sortable1 {
  background: #fff;
}
#sortable2 {
  background: #999;
}
.connectedSortable li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}
</style>

<ul id="sortable1" class="connectedSortable">
  <li data-id="2" class="ui-state-default acceptable">StoreID</li>
  <li data-id="3" class="ui-state-default">ItemLookupCode</li>
  <li data-id="4" class="ui-state-default">ExtendedCost</li>
  <li data-id="5" class="ui-state-default">Quantity</li>
  <li data-id="6" class="ui-state-default">Price</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li data-id="2"></li>
  <li data-id="3"></li>
</ul>

关键改动说明 #

1. 限定拖拽方向：通过ui.sender判断拖拽来源是左侧的sortable1，避免处理从右侧拖回左侧的情况（如果不需要双向拖拽，也可以直接禁用右侧的拖拽功能）
2. 获取正确的目标占位符ID：用ui.item.index()拿到拖拽元素在目标列表中的位置，再通过eq(targetPositionIndex)找到对应位置的占位li，这样就能拿到该位置对应的data-id，而不是固定取第一个li的ID
3. 逻辑更严谨：只有当拖拽元素的data-id和目标位置占位符的data-id不匹配时，才触发提示并取消拖拽

这样修改后，你拖拽ItemLookupCode到右侧第二个位置（data-id=3的占位符）时就能正常匹配啦～

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