在 jquery-ui 可排序的两个列表之间交换列表项

Question

我有两个包含 6 个项目的列表，connectedWith 一类 .connectedSortable 当我在两个列表之间移动一个项目时，该项目应该与那里的位置交换（例如：如果我移动 item-1 并放在 item- 7 然后 item-1 必须移动到 item-7 的位置，反之亦然）以及如何将这两个元素与它们的 id 交换。 这是两个 ul li 列表：

<ul class="connectedSortable">
    <li class="ui-state-default" id="item-1">Item 1</li>
    <li class="ui-state-default" id="item-2>Item 2</li>
    <li class="ui-state-default" id="item-3>Item 3</li>
    <li class="ui-state-default" id="item-4>Item 4</li>
    <li class="ui-state-default" id="item-5>Item 5</li>
    <li class="ui-state-default" id="item-6>Item 6</li>
</ul>
<ul class="connectedSortable">
    <li class="ui-state-highlight" id="item-7>Item 7</li>
    <li class="ui-state-highlight" id="item-8>Item 8</li>
    <li class="ui-state-highlight" id="item-9>Item 9</li>
    <li class="ui-state-highlight" id="item-10>Item 10</li>
    <li class="ui-state-highlight" id="item-11>Item 11</li>
    <li class="ui-state-default" id="item-12>Item 12</li>
</ul>

$( ".connectedSortable" ).sortable({
    connectWith: ".connectedSortable"
}).disableSelection();

Answer 1

试试这个，

$(function() {
    $( ".connectedSortable" ).sortable({
        connectWith: ".connectedSortable",
        receive: function (event, ui) {
             var returnItem = $("li",this).first();
             $(".connectedSortable").not(this).append(returnItem);
        }
    }).disableSelection();
});

.connectedSortable { 
list-style-type: none; 
margin: 0;
padding: 0 0 2.5em; 
float: left; 
margin-right: 10px; 
}
.connectedSortable li {
    font-size: 1.2em;
    margin: 0 5px 5px;
    padding: 5px;
    width: 150px;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: #E6E6E6;
    border: 1px solid #D3D3D3;
    color: #555555;
    font-weight: normal;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: #FBF9EE;
    border: 1px solid #FCEFA1;
    color: #363636;
}

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

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

Answer 2

从这里得到了简单的片段：JQueryUI。这将允许您从列表中选择项目并放入另一个列表中。停止事件为您提供新项目的确切位置。

$( function() {
        $( "#sortable1, #sortable2" ).sortable({
          connectWith: ".connectedSortable",
          stop: function(event, ui) {
            alert("Placed After: " + ui.item.index());
          }
        }).disableSelection();
      } );

#sortable1, #sortable2 {
        border: 1px solid #000;
        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;

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/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>

对于提前，您可以找到另一个堆栈答案Here。希望这会对你有所帮助。

您好！