2010-07-31 7 views
22

Mon problème: L'événement sortable sort: se déclenche lorsque je fais glisser quelque chose dans la liste ou lorsque je trie la liste. Mais je veux seulement commencer la fonction quand je fais glisser un article.Jquery Sortable, supprimer l'élément actuel par glisser

Mon code

 $(document).ready(function ust() 
     {  
      $('#div1').sortable({ 
       out: function(event, ui) { $('#nfo').append('OUT<br />'); } 
      }); 

     }); 

exemple de travail http://jsfiddle.net/FrbW8/22/

+0

Hmm, est-ce un bug Jquery? Coz ... Out -> Cet événement est déclenché lorsqu'un élément triable est éloigné d'une liste connectée. Start -> Cet événement est déclenché au début du tri. Stop -> Cet événement est déclenché lorsque le tri est arrêté. – Peter

+2

+1 pour jsFiddle –

+3

Blair - C'est à peu près l'excuse la plus stupide que j'ai vue jusqu'ici sur SO. – Christian

Répondre

4

Ceci est le comportement par défaut de la fonction de rappel out. Voir cet ui jquery trac ticket

Je ne suis vraiment pas d'accord avec la notion de comportement «logique».

« Cependant, notez que le « out » rappel sera toujours déclenchée si vous faites glisser dans une liste, puis relâchez la souris (mais pas si vous n'êtes pas sur la liste). Ceci est comportement logique et arrive pour les sortables normales ainsi. "

+0

est-il possible d'arrêter le feu? Par exemple, j'ajoute sortstart et sorttop. -> Si sortart: -> abbort out: ... si sortStop: -> abbort out: – Peter

+0

Cela va devenir salissant je pense. Vous pourriez essayer de vous salir les mains et de changer la jquery ui src pour arrêter ce comportement de «sortie». – redsquare

+0

Hey redsquare, mais quand je change le src, je dois le changer après chaque mise à jour de l'interface utilisateur. :( Droit? – Peter

33

Utilisez beforeStop pour intercepter l'élément et le retirer:

receive: function(e, ui) { sortableIn = 1; }, 
over: function(e, ui) { sortableIn = 1; }, 
out: function(e, ui) { sortableIn = 0; }, 
beforeStop: function(e, ui) { 
    if (sortableIn == 0) { 
     ui.item.remove(); 
    } 
} 

(je d'abord trouvé cela dans Google, mais ne trouve plus le lien Donc, je présente mes excuses pour ne pas référencer la source..

+3

Voici le lien: http: //forum.jquery.com/topic/drag-item-out-of-a-sortable – lo5

+0

Cela semble empêcher le tri normal des éléments. Si je l'utilise et que je fais glisser les éléments à trier, même s'il ne sort jamais du contrôle, il supprime l'élément. –

3

Les autres solutions ne semblent pas fonctionner avec les listes triables connectées, donc je poste ma propre solution qui fonctionne parfaitement pour mon cas. Cela utilise le plugin "droppable" capturant l'événement "drop" lorsque les éléments sont supprimés en dehors des listes triables.

$('#div1').sortable({ 
    .... 
}).droppable({greedy: true}) 

$('body').droppable({ 
    drop: function (event, ui) {   
     ui.draggable.remove(); 
    } 
}); 

Voici un jsFiddle de cette approche en action: http://jsfiddle.net/n3pjL/

+0

C'est une approche que j'ai essayée aujourd'hui sans succès, parce que je n'ai pas trouvé l'option 'greedy'. Merci pour l'indice! – Tsunamis

1

J'utilise this.element.find('.ui-sortable-helper').length pour faire la différence entre « tri événement » et « abandonner l'événement ». Lorsque vous effectuez un tri, l'élément trié a la classe ui-sortable-helper. Après le drop il n'y a pas d'autre classe ui-classable jusqu'à ce que tu recommences à trier (du moins dans mon script). J'espère aider quelqu'un.