如何将 jQuery UI 连接列表拖放限制为单个方向

How can I restrict jQuery UI connected lists drag and drop to single direction

本文关键字：单个 方向 拖放 列表 jQuery UI 连接      更新时间：2023-09-26

我正在使用jQuery UI Connectedlist

在这里，拖放在从左到右和从右到左的两侧都可以正常工作。

如何禁用从右到左？它只需要一种方式，从左到右。

我还需要排序才能像灰色项目一样在黄色物品ul内工作。 

$(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  });
#sortable1, #sortable2 {
    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 li, #sortable2 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
 
<body>
 
<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
 
<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>
 
 
</body>
</html>

您可以在右侧列表中取消拖动事件，sortable2在 sortable1 中使用接收事件来防止从第二个列表中接收任何项目。

要将灰色li拖回左侧，我们将添加帮助程序类，例如s2，它将识别sortable2原始项目并仅取消对它们的拖动：

$("#sortable1").sortable({
     receive: function(ev, ui) {
          if(ui.item.hasClass("s2"))
               ui.sender.sortable("cancel");
     }
});

希望这有帮助。

$(function() {
    $( "#sortable1, #sortable2" ).sortable({
         connectWith: ".connectedSortable"
    }).disableSelection();
    $("#sortable1").sortable({
        receive: function(ev, ui) {
           if(ui.item.hasClass("s2"))
               ui.sender.sortable("cancel");
        }
    });
});
#sortable1, #sortable2 {
    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 li, #sortable2 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
 
<body>
 
<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
 
<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight s2">Item 1</li>
  <li class="ui-state-highlight s2">Item 2</li>
  <li class="ui-state-highlight s2">Item 3</li>
  <li class="ui-state-highlight s2">Item 4</li>
  <li class="ui-state-highlight s2">Item 5</li>
</ul>
 
 
</body>
</html>

目前您的connectWith选择器与两个可排序的匹配，即它是双向连接。如果您只想要从左到右的单向连接，只需使用比普通选择器更具体的选择器 （ #sortable2） 将左可排序连接到右可排序：

$(function() {
  $("#sortable1").sortable({
      connectWith: "#sortable2"
  }).disableSelection();
  $("#sortable2").sortable({}).disableSelection();
});

下面的演示具有执行相同操作的较短代码：

$(function() {
  $(".connectedSortable").sortable({
    connectWith: "#sortable2"
   //----------^---------- #sortable2 connectWith #sortable2 has no effect
  }).disableSelection();
});
#sortable1,
#sortable2 {
  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 li,
#sortable2 li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

您正在寻找的选项是取消和更新（受上述帖子启发的 s2），它将禁用对匹配元素的拖动。

$(function() {
    $( "#sortable1, #sortable2" ).sortable({
        connectWith: ".connectedSortable",
        cancel: ".ui-state-highlight, .s2",
        update: function( event, ui ) {ui.item.addClass("s2");}
    }).disableSelection();
});
相关文章：