jQuery déplaçable revenir basée sur la condition
Je vais avoir un problème de jQuery déplaçable et droppable. Voici la description de quelque chose que je veux faire.
Première: j'ai deux divs. On est <div id="selected">
et un autre est <div id="container">
. "conteneur" a 10 <li>
qui sont déplaçables et droppable dans "sélectionné". Voici le code:
<div id="selected">
<ul class="sortable-list">
</ul>
</div>
<div id="container">
<ul class="sortable-list">
<li>1</li>
<li>2</li>
<li>....</li>
<li>9</li>
<li>10</li>
</ul>
</div>
Deuxième: je voulez permettre à tous les 5 <li>
s de "conteneur" pour "sélectionné", div. Si quelqu'un essaie d'ajouter un 6ème <li>
, alors il ne doit pas permettre à l'utilisateur. C'est la 6ème <li>
qui va être inséré dans "sélectionné" doit être restauré à l'aide de jQuery déplaçable option de revenir.
c'est à dire $("#container li").draggable({ revert: true });
Voici le code javascript pour que.
$(document).ready(function(){
var total = 0;
$("#selected").droppable({
drop: function() {
total = $("#selected li").length;
//alert(total);
if (total >= 5) {
$("#container li").draggable({ revert: true });
} else {
//below code is not working
$("#container li").draggable({ revert: false }); //this is making whole feature weird. I can drag all the <li> anywhere
}
}
});
});
Cela fonctionne bien.
Troisième: Mais quand je fais glisser un <li>
de "sélection" pour "conteneur", "sélectionné" div aura seulement 4 <li>
s. Donc, dans cette situation, plus tard, l'utilisateur doit être en mesure d'ajouter un autre <li>
dans "sélectionné" div "conteneur" div. Mais malheureusement il ne fonctionne pas. Tous les <li>
s j'ai essayer de faire glisser et déposez-les dans "sélectionnés" sont annulées en raison de if (total >= 5 )
condition.
Quelqu'un peut-il m'aider à résoudre ce à l'aide des déplaçable revenir option? S'il vous plaît...
OriginalL'auteur gautamlakum | 2010-11-29
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser le
accept
qui prend une fonction pour faire tout cela beaucoup plus facile, comme ceci:Vous pouvez le tester ici. Lorsque vous faites glisser des éléments, la
.length
descend et il va accepter de nouveau les éléments...pas de raison de faire plus compliqué 🙂vous devriez obtenir l'effet, êtes-vous toujours en ajoutant/supprimant des déplaçable n'importe où?
Craver - je ne vois pas le glisser effet, tout en les faisant glisser à partir de la sélection retour à la div conteneur. Mais en fin de compte, comme un résultat que j'obtiens LI déplacé à partir de la sélection div div conteneur et le LI est ajouté à la fin de la LI de la liste à chaque fois.
oooh, je vois ce que tu veux dire, ici, ya go: jsfiddle.net/nick_craver/HemSU/1
Hey Nick, il a travaillé. Merci beaucoup.
OriginalL'auteur Nick Craver
Tout d'abord, le réglage de
revert
à faux, va désactiver le revert de la fonction entièrement. Comme vous le soulignez, vous serez en mesure de déposer le draggables n'importe où. Ce que vous voulez généralement estrevert: 'invalid'
ce qui signifie qu'il va revenir à chaque fois qu'il est tombé sur quelque chose qui n'est pas un drop qui l'accepte.Ce que vous voulez faire doit être quelque chose comme ceci:
OriginalL'auteur David Hedlund