Faire glisser l'élément triable dans droppable à l'aide de jQuery UI

RÉSOLU

J'ai donc étudié sortable() avec le connectWith attribut un peu plus et a trouvé la solution était plus simple que ce que j'attendais, mais je pensais qu'il sorte de l'arrière à cause de draggable() et droppable().

Voici le violon: http://jsfiddle.net/DKBU9/12/


Question de départ suivante:

C'est une extension du précédent, DONC, la question que je me sentais devraient être séparés.

La question d'origine est ici: jQuery UI - Clone droppable/liste triable après la chute de l'événement. Il concerne à la réinitialisation de la droppable gestionnaire sur cloné éléments.

Sur le dessus de que, même si, je suis en train de permettre aux éléments qui ont été traînés à partir de la liste initiale pour être triés au sein de la droppable listes.

Ici est un violon essentiellement illustrant le comportement actuel comme un résultat de la question d'origine: http://jsfiddle.net/DKBU9/7/

Et le code nécessaire car aime à se plaindre et à gonfler ces postes:

HTML

<ul id="draggables">

    <li>foo1</li>
    <li>foo2</li>
    <li>foo3</li>

</ul>

<ul class="droppable new">

</ul>

JS

$(function() {
$('#draggables > li').draggable({
appendTo: 'document',
revert: 'invalid'
});
$('.droppable > li').draggable({
appendTo: 'document',
revert: 'invalid'
});
$('#draggables').droppable({
accept: '.droppable > li',
drop: function(event, ui) {
ui.draggable.detach().css({top: 0,left: 0}).appendTo($(this));
cleanUp();
}
});
initDrop($('.droppable'));
});
function initDrop($element) {
$element.droppable({
accept: function(event, ui) {
return true;
},
drop: function(event, ui) {
if($(this).hasClass('new')) {
var clone = $(this).clone();                
$(this).after(clone);
$(this).removeClass('new');
initDrop( clone );
}
ui.draggable.detach().css({top: 0,left: 0}).appendTo($(this));  
cleanUp();
}
}).sortable({
items: 'li',
revert: false,
update: function() {
cleanUp();   
}
});
}
function cleanUp() {
$('.droppable').not('.new').each(function() {
if($(this).find('li').length == 0) {
$(this).remove();
}
});
}

Question de référence: Jquery UI combiner sortable et déplaçable

J'ai essayé d'utiliser ce DONC, la question à résoudre mon problème car le résultat est exactement ce que je suis en train de réaliser, plus précisément la dernière violon fournies dans les commentaires de la accepté de répondre, mais je n'arrive pas à comprendre comment l'adapter à mon code en considérant les différences mineures. Par exemple, le violon dans la question des clones de selection plutôt que de faire glisser l'élément actuel et contrairement à mine de ne pas permettre que les éléments à glisser de nouveau dans la liste initiale.

Sorte que toute aide pour essayer d'obtenir que le résultat de mon code serait grandement apprécié.

Aussi, dans cet exemple, le accept attribut est défini comme une fonction de retourner la valeur true. Quelle est la raison? N'est-ce pas juste de dire qu'il va accepter quoi que ce soit, ou de tout élément déplaçable?

EDIT: j'ai lu quelques réponses utilisées sortable() avec le connectWith attribut, mais pour une raison que je ne pense pas qu'il a fait ce que j'ai dû, en partie parce que je ne voulais pas la première liste triable. Cependant, l'utilisation de sortable() seul semble pour obtenir la fonctionnalité que je suis après, mais je n'en ai pas encore adapté à tous les gestionnaires d'événements.

Ma réponse permettra à la liste initiale de ne pas être triée selon vos modifier, mais si vous êtes OK avec elle être sortable, alors je pense que vous devriez aller avec le vôtre, c'est plus simple.
Ouais, j'apprécie vraiment votre temps et d'efforts, mais je vais en tenir à ce qu'il n'est pas vraiment une grosse affaire que la liste initiale est triable.

OriginalL'auteur Bobe | 2014-01-08