jquery - 在 jquery-ui sortable 中的两个列表之间交换列表项

Question

我有两个包含 6 个元素的列表，连接了一个 .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>