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, 2022 in Web Development by gaurav
• 23,260 points
1,111 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, 2022 in Web Development by gaurav
• 23,260 points
242 views
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
402 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, 2022 in Web Development by gaurav
• 23,260 points
285 views
0 votes
1 answer

Jquery and Menu and logo

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

answered Jun 22, 2022 in Web Development by rajatha
• 7,680 points
235 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, 2022 in Web Development by rajatha
• 7,680 points
343 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,411 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, 2022 in Web Development by gaurav
• 23,260 points
1,025 views
0 votes
1 answer

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

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

answered Feb 23, 2022 in JQuery by Aditya
• 7,680 points
7,810 views
0 votes
0 answers

jQuery UI DatePicker - Change Date Format

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

Jun 23, 2022 in Web Development by gaurav
• 23,260 points
879 views
0 votes
1 answer

jQuery dialog popup

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

answered Jun 28, 2022 in Web Development by rajatha
• 7,680 points
950 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