使用特定元素拖放移动项目 jquery

Question

你好我左边有列表，当我拖动元素时它必须移动到元素匹配在这段代码中： -我试图为每个元素创建一个数据ID，如果两个ID相等，它就会滑入相应的元素 - 如果我移动 StoreID 但在 ItemLookupCode 中不起作用，它会起作用

$(function() {
  $(".connectedSortable").sortable({
    connectWith: ".connectedSortable",
    update: function(e, ui) {
      var s=ui.item.attr("data-id");

var s1=$("#sortable2 li").attr("data-id");

      if (s ==s1) {
    
 
     
      }
      if (s!=s1){
      alert("no")
        ui.sender.sortable("cancel");
      }
    }
  }).disableSelection();
});

.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;
}

<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>

<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>

Answer 1

这是我的代码。首先，当您将 sortable1 项目移动到 sortable2 时，该属性将被复制到 sortable2，因此请更改 sortable2 的属性名称以防止混淆。然后你应该检查 sortable2 中的所有项目。

$(function() {
  $(".connectedSortable").sortable({
    connectWith: ".connectedSortable",
    update: function(e, ui) {
      if (!ui.sender) return
      var s = ui.item.attr("data-id");
      var matches = $("#sortable2 li[data-target=" + s + "]").length
      if (matches === 0) {
        ui.sender.sortable("cancel");
      }
    }
  }).disableSelection();
});

.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;
  cursor: move;
}

#sortable1 {
  background: #fff;
}

#sortable2 {
  background: #999;
}

<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>
<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-target="2"></li>
  <li data-target="3"></li>
</ul>

使用特定元素拖放移动项目 jquery

move item with specific element drag and drop jquery

jquery

jquery-ui-sortable