jQuery UI Sortable and two connected lists

0 votes

I am trying to put together the following with jQuery and Sortable: There are two cases that I need to grab:

  • A: move an item within the same list
  • B: move an item from one list to another

Case B is solved when only using the receive event. But if I bind both receive and stop they also get fired both when moving an item from one list to another. This makes it impossible for me to capture case A because I have no way of finding out if the item was moved from another list or within the same. Hope that makes sense.

This is kind of weird because I would think of my use case as being the most used one.

I am craving for ideas. If you want to try it out, see http://jsfiddle.net/39ZvN/5/.

HTML:

<div id="list-A">
  <ul class="sortable">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
</div>
<br />
<div id="list-B">
  <ul class="sortable">
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
  </ul>
</div>

JS:

$(function() {
  $('.sortable').sortable({
    stop: function(event, ui) {
      // Wird auch aufgerufen wenn von Liste X nach Liste Y gezogen wird
      if(!ui.sender) alert("sender null");
      else alert("sender not null");
    },
    receive: function(event, ui) {
      // Funktioniert top, damit kann ich Fall B abfangen
      alert("Moved from another list");
    },
    connectWith: ".sortable"
  }).disableSelection();
});

Jul 19 in Web Development by gaurav
• 17,580 points
12 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: 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

jquery-ui and webpack, how to manage it into module?

any idea how to deal with that ...READ MORE

Jul 28 in Web Development by gaurav
• 17,580 points
9 views
0 votes
1 answer

Jquery and Menu and logo

Seems your anchor tag is not visible ...READ MORE

answered Jun 22 in Web Development by rajatha
• 7,040 points
14 views
0 votes
1 answer

jQuery $(this) selector function and limitations

this isn't a jQuery "thing", but a basic JavaScript ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,040 points
14 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
1 answer

What is the difference between JavaScript and jQuery?

JavaScript is an independent language and can ...READ MORE

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

jQuery UI Sortable Connected Lists - Get Changed Status

I'm implementing sortable plugin of jQuery UI. There ...READ MORE

Jul 29 in Web Development by gaurav
• 17,580 points
14 views
0 votes
1 answer

TypeError: $(...).autocomplete is not a function

You would definitely have missed the Jquery ...READ MORE

answered Feb 23 in JQuery by Aditya
• 7,300 points
348 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

jQuery dialog popup

This HTML is fine: <a href="#" id="contactUs">Contact Us</a> ...READ MORE

answered Jun 28 in Web Development by rajatha
• 7,040 points
14 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