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 in Web Development by gaurav
• 17,580 points
14 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
1 answer

Get checkbox value in jQuery

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

answered Jun 23 in Web Development by rajatha
• 7,040 points
17 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 in Web Development by rajatha
• 7,040 points
22 views
0 votes
1 answer

jQuery get value of select onChange

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

answered Jun 23 in Web Development by rajatha
• 7,040 points
18 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 in Web Development by rajatha
• 7,040 points
14 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 in Web Development by rajatha
• 7,040 points
64 views
0 votes
0 answers

jQuery UI DatePicker - Change Date Format

I am using the UI DatePicker from ...READ MORE

Jun 23 in Web Development by gaurav
• 17,580 points
11 views
0 votes
1 answer

Date range picker on jquery ui datepicker

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

answered Jun 27 in Web Development by rajatha
• 7,040 points
53 views
0 votes
0 answers

jQuery UI Sortable and two connected lists

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

Jul 19 in Web Development by gaurav
• 17,580 points
12 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 in Web Development by gaurav
• 17,580 points
11 views
0 votes
0 answers

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

I made a copy of JSbin for ...READ MORE

Jul 20 in Web Development by gaurav
• 17,580 points
10 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP