交換列表項

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前進。希望這會幫助你。

問候！