CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui-sortable
Narasing Kokane
Narasing Kokane

Reputation: 7

Swap list item between two list in jquery-ui sortable

I have two list with 6 items, connectedWith a class of .connectedSortable When I move an item between the two lists, the item should be swapped with there positions(for ex: if i move item-1 and drop on item-7 then item-1 has to move to the position of item-7 and vice versa) and how can i swap these two element with their id's. Here is the two ul li list:

<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();

Upvotes: 0

Views: 1829

Answers (2)

Geee
Geee

Reputation: 2249

Got simple snipet from here: JQueryUI. This will allow you to choose item from the list and put inside another list. stop event give you exact position of the new item.

$( 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>

For the advance you can find the another stack answer Here. Hope this will help you.

Greetings!

Upvotes: 0

codesayan
codesayan

Reputation: 1715

Try This,

$(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>

Upvotes: 1

Related Questions