jQuery UI Sortable et deux listes connectées

Je suis en train de mettre ensemble ce qui suit avec jQuery et Sortable:
Il y a deux cas que j'ai besoin de saisir:

  • Un: déplacer un élément dans la même liste
  • B: déplacer un élément d'une liste à une autre

Cas B est résolu lorsque uniquement à l'aide de la receive événement. Mais si je lier les deux receive et stop ils ont aussi tiré les deux lors du déplacement d'un élément d'une liste à l'autre.
Cela rend impossible pour moi de capturer des cas Un car je n'ai aucun moyen de savoir si l'article a été déplacé sur une autre liste ou dans le même. L'espoir qui fait sens.

C'est un peu bizarre parce que je pense que de mon cas d'utilisation comme étant le plus utilisé.

Je suis la soif pour les idées. Si vous voulez l'essayer, voir 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();
});

source d'informationauteur balu

  1. 30

    de Ce fait intéressant fait le travail. J'aurais pensé que l'annulation serait déplacer le point d'origine de la liste, mais l'événement est déclenché très fin et arrête les autres événements de la cuisson. Espérons que cette aide. Cette solution n'a pas marché, mais j'ai été assez stupide pour ne pas le voir. J'ai enlevé le code précédent comme c'est un non-sens complet.

    C'est une solution de travail, les pistes de l'état à l'aide de plusieurs événements:

    $(function() {
    var oldList, newList, item;
    $('.sortable').sortable({
        start: function(event, ui) {
            item = ui.item;
            newList = oldList = ui.item.parent().parent();
        },
        stop: function(event, ui) {          
            alert("Moved " + item.text() + " from " + oldList.attr('id') + " to " + newList.attr('id'));
        },
        change: function(event, ui) {  
            if(ui.sender) newList = ui.placeholder.parent().parent();
        },
        connectWith: ".sortable"
    }).disableSelection();
});

    http://jsfiddle.net/39ZvN/9/

  2. 3

    Je pense que c'est ce que tu voulais
    http://jsfiddle.net/39ZvN/6/

    Vous avez essentiellement pour séparer les sortable commandes et de donner à chaque UL id.

  3. 1

    Ce que vous essayez de faire, c'EST un très commun de cas d'utilisation. C'est pourquoi il y a une façon très simple de réalisation:

    $('#liste-A, #liste-B').sortable({ connectWith: '.sortable' });

    C'est tout là est à lui.

    Voici un exemple vivant avec des explications sur le jQuery UI docs page:
    http://jqueryui.com/demos/sortable/#connect-lists