交换列表项

Question

我有两个列表有6项，connectedWith一类.connectedSortable的当我移动两个列表之间的一个项目，该项目应与有位置互换（为前：如果我的项目，7项移动-1和下降，然后按项目-1具有移动至项目-7，反之亦然）的位置，我怎么可以交换这两个元素与他们的ID。 下面是这两个上行李名单：

<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

得到简单snipet从这里：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前进。希望这会帮助你。

问候！