如何限制 jQuery UI 连接的列表拖放至单向

Question

我正在使用 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>

Answer 1

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

要将灰色 lis 拖回左侧，我们将添加助手 class，例如 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>

Answer 2

您正在寻找的选项是取消和更新（s2 灵感来自上面的 post），它将禁用对匹配元素的拖动。

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

Answer 3

目前您的 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>

如何限制 jQuery UI 连接的列表拖放至单向

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

javascript

jquery

drag-and-drop

jquery-ui

jquery-ui-sortable