jQuery UI Sortable Connected Lists - Get Changed Status

0 votes

I'm implementing sortable plugin of jQuery UI. There are two columns and we can drag and drop an element from one column to another column. I have the following javascript code:

$(function () {
     $("#sortable1, #sortable2").sortable({
         connectWith: ".connectedSortable",
         update: function () {
             var order1 = $('#sortable1').sortable('toArray').toString();
             var order2 = $('#sortable2').sortable('toArray').toString();

             alert("Order 1:" + order1 + "\n Order 2:" + order2); 
             $.ajax({
                 type: "POST",
                 url: "/echo/json/",
                 data: "order1=" + order1 + "&order2=" + order2,
                 dataType: "json",
                 success: function (data) {
                 }
             });
         }
     }).disableSelection();
 });

And HTML:

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default" id='item1'>Item 1</li>
  <li class="ui-state-default" id='item2'>Item 2</li>
  <li class="ui-state-default" id='item3'>Item 3</li>
  <li class="ui-state-default" id='item4'>Item 4</li>
  <li class="ui-state-default" id='item5'>Item 5</li>
</ul>
 
<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight" id='item6'>Item 6</li>
  <li class="ui-state-highlight" id='item7'>Item 7</li>
  <li class="ui-state-highlight" id='item8'>Item 8</li>
  <li class="ui-state-highlight" id='item9'>Item 9</li>
  <li class="ui-state-highlight" id='item10'>Item 10</li>
</ul>

From above javascript, I can get the order of column 1 and column 2 after change as a whole. However, I would like to know the individual item that has been changed. Like, in this image below, I have Item3 dragged from Column 1 to Column 2. I want to get output like - Item3_before=Column1,Item3_after=Column2. enter image description here

In the javascript code above, by using start event like the update event, we can get the Before status of the elements, but not the individual element; it gives before status of all elements.

Jul 29, 2022 in Web Development by gaurav
• 23,260 points
1,185 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
0 answers

jQuery UI sortable and container zoom

I want to sort divs within a ...READ MORE

Aug 24, 2022 in Web Development by gaurav
• 23,260 points
544 views
0 votes
1 answer

Get checkbox value in jQuery

To get the value of the Value ...READ MORE

answered Jun 23, 2022 in Web Development by rajatha
• 7,680 points
630 views
0 votes
1 answer

jQuery get value of select onChange

Try this- $('select').on('change', function() { alert( this.value ...READ MORE

answered Jun 23, 2022 in Web Development by rajatha
• 7,680 points
563 views
0 votes
1 answer

jQuery get value of select onChange

To get the value and text of ...READ MORE

answered Jun 23, 2022 in Web Development by rajatha
• 7,680 points
1,101 views
0 votes
1 answer

Get checkbox value in jQuery

if you have set a class or id for it, you ...READ MORE

answered Jun 23, 2022 in Web Development by rajatha
• 7,680 points
726 views
0 votes
1 answer

jQuery get value of selected radio button

Input Radio value Property Get the value of ...READ MORE

answered Jun 23, 2022 in Web Development by rajatha
• 7,680 points
2,681 views
0 votes
1 answer

Date range picker on jquery ui datepicker

Thanks I need this kind of code. ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,680 points
4,893 views
0 votes
0 answers

jQuery UI Sortable and two connected lists

I am trying to put together the ...READ MORE

Jul 19, 2022 in Web Development by gaurav
• 23,260 points
1,470 views
0 votes
0 answers

jQuery UI: connect sortable lists through tabs

Here is an example at jQuery UI official site, ...READ MORE

Jul 20, 2022 in Web Development by gaurav
• 23,260 points
364 views
0 votes
1 answer

How to set jQuery draggable min/max-left and min/max-right

How to set jQuery draggable min/max-left and ...READ MORE

answered Jul 25, 2022 in Web Development by rajatha
• 7,680 points
653 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP