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.
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
Vous devez vous connecter pour publier un commentaire.
Voir ce violon.
Il fera les éléments droppable et triable dans les nouvelles listes, mais pas dans la première (selon l'édition).
Il y a quelques trucs:
1) en Commençant par le déplaçable, j'ai ajouté une nouvelle fonction, car nous avons besoin de laisser un espace réservé (utiliser un clone), de sorte que les conteneurs ne pas sauter sur les cours de glisser et nous avons besoin de l'initialiser le nouvel élément déplaçable.
Note le
connectToSortable:
avec.droppable
(Comme le nettoyage, je pense que vous devriez changer droppable à triable);Note également
revert:
- cela nous donne l'occasion de supprimer le "glisser" classe (ce qui fait de l'original (cloné) élément invisible) sur revenir.Enfin, il est
start
qui ajoute le "glisser" classe qui fait de l'original (cloné) élément invisible au cours de glisser. Il définit également le $draggingParent qui est utilisé pour vérifier si l'élément est déplacé depuis#draggables
ou.droppables
.2) Ensuite, il ya la
droppable()
pour la#draggables
:Noter que le
drop
gestionnaire vérifie si cet élément est supprimé de#draggables
ou.droppables
et agit en conséquence.3) Enfin, comme vous l'avez déjà mentionné, nous voulons vraiment le drop, pour être sortable:
Note le
connectWith
et plus précisément, qu'il désigne à la fois.droppable
et#draggables
.OriginalL'auteur acarlon