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

1 个答案: