jQuery - manipuler l'élément déposé dans la liste à trier

Question

J'ai une liste déroulante (.field) où vous pouvez faire glisser & déposer des éléments à partir d'une liste triable (.sortlist). Je l'ai fait de cette façon parce que je ne voulais pas que la liste principale (.field) soit modifiée de quelque façon que ce soit. Cela fonctionne bien, sauf que je ne peux pas déterminer comment manipuler le champ supprimé dans une liste triable.

je peux le faire à partir d'un draggable dans une zone largable en utilisant ce qui suit dans une fonction pour « goutte: » dans largable():

$(this).append('html code here to change content of dragged field'); 

Cependant, cela ne fonctionne pas à l'intérieur d'un triables() . Mon code ressemble à ceci:

$(".sortlist").sortable({ 
    receive: function(event, ui) { 
    var dropElemTxt = $(ui.item).text(); 
    var dropElemId = $(ui.item).attr('id'); 
    $(ui.item).replaceWith('<li class="box" id="'+dropElemId+'">Updated field! '+dropElemTxt+'</li>'); 
    } 
}); 

$ (ui.item) .replaceWith modifie le champ de maître qui était traîné, donc cela ne fonctionne pas. Et j'ai essayé $ (this) .replaceWith, mais cela met à jour la zone triable (.sortlist).

N'importe quelle idée du code dont j'ai besoin pour référencer l'élément déplacé?

Merci beaucoup, Ali.

Answer 1

Je pense que j'ai travaillé. Un peu hacky, mais semble fonctionner!

-je utiliser $ ('sortlist li:. Dernier) pour accéder à l'élément traîné ...

Answer 2

Je pense que je suis en fait avec une meilleure solution ... semble fonctionner jusqu'à présent ..

J'ai attaché un droppable à un sortable pour déclarer une variable globale de l'élément déplacé. Un peu comme si:

$(".sortlist").droppable({ 
    drop: function(e, ui) { 
    draggedItem = ui.draggable; 
    } 
}).sortable({ 
    receive: function(event, ui) { 
    //do something with the 'draggedItem' here... 
    var droppedElemTxt = draggedItem.text(); 
    var droppedElemId = draggedItem.attr('id'); 
    } 
}); 

Answer 3

j'ai suivi votre ligne de pensée, mais il y avait quelques bugs en utilisant cette approche (parfois être laissé tomber l'élément a disparu lors de l'utilisation largable + triables). Voici quelque chose qui a fonctionné pour moi:

$(".draglist").draggable({ 
    start: function(e, ui) { 
    draggedItem = ui.item; 
    } 
}); 

$(".sortlist").sortable({ 
    receive: function(event, ui) { 
    //do something with the 'draggedItem' here... 
    var droppedElemTxt = draggedItem.text(); 
    var droppedElemId = draggedItem.attr('id'); 
    } 
    , start: function(e, ui) { 
    draggedItem = ui.item; 
    } 
}); 

Answer 4

Ne pas être en mesure d'accéder à l'élément tombé est un known bug in JQuery ui sortables. Le ticket contient un patch qui vous permet d'accéder à l'élément tombé, ce qui devrait être fixé dans la prochaine sortie majeure.

Answer 5

Vous pouvez obtenir l'objet beforeStop événement traîné:

beforeStop: function (event, ui) { draggedItem = ui.item;}, 
receive: function (event, ui) { /* use draggedItem here*/ } 

En utilisant événement beforeStop au lieu de recevoir était assez pour moi:

beforeStop: function(event, ui) { 
     var myClassItem = $('.myClass', ui.item); 
     myClassItem.bind('click', function(){ /*my function*/ }); 
    }