web-dev-qa-db-fra.com

Annuler le glissement d'un élément triable

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.

jqueryjquery-uijquery-ui-sortable
21
mcmlxxxiii

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");
        }
    }
});
15
Mottie

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');
    }
  }
});
28
root

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"
});
25
Ben Blank

Essayez cet exemple

 $ ('# list1'). triable ({
 connectWith: 'ul' 
}); 
 
 $ ('# list2'). triable ({
 connectWith: 'ul', 
 receive: function (ev, ui) {
 if (ui.item.hasClass ("number")) 
 ui.sender.sortable ("cancel"); 
} 
});
8
Mj Azani