Un cas triable absolument courant:
<script>
$(function() {
$("#sortable").sortable();
});
</script>
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Problème. Besoin d'annuler le glissement d'un élément à certaines conditions et il y a un bon conseil de Andrew Whitaker , mais cette approche ne fonctionne que pour jquery-ui-draggable et échoue pour les triables:
$("#sortable").sortable({
start: function() {
return false; // will still cause `this.helper is null`
}
});
Sera reconnaissant pour les suggestions.
La fonction de rappel sort
fait la même chose pour le tri que le glisser pour le faire glisser ( démo ):
$("#sortable").sortable({
sort: function() {
if ($(this).hasClass("cancel")) {
$(this).sortable("cancel");
}
}
});
Sortable a une capacité "d'annulation" invoquée à l'aide de sortable('cancel')
.
De la documentation: "Annule un changement dans le tri en cours et le ramène à l'état avant le début du tri en cours." Voir http://api.jqueryui.com/sortable/#method-cancel .
Exemple d'utilisation:
$("#sortable").sortable({
stop: function(e, ui) {
if ("I need to cancel this") {
$(ui.sender).sortable('cancel');
}
}
});
Renvoyer false
comme fudgey suggère que cela fonctionne très bien pour rendre les choses dynamiquement non triables, mais il y a aussi une option cancel
dans la configuration triable qui vous permet configurer également les éléments non triables statiques:
$("#sortable").sortable({
// this prevents all buttons, form fields, and elemens
// with the "unsortable" class from being dragged
cancel: ":input, button, .unsortable"
});
Essayez cet exemple
$ ('# list1'). triable ({ connectWith: 'ul' }); $ ('# list2'). triable ({ connectWith: 'ul', receive: function (ev, ui) { if (ui.item.hasClass ("number")) ui.sender.sortable ("cancel"); } });