jQuery UI sortable: comment émuler l'événement 'beforeStart'?

Question

im en utilisant le jQuery UI sortable plugin pour trier quelques fieldsets élevés (~ 300px de hauteur).

Mon but est de cacher le contenu principal de ce fieldset, en gardant visible juste la balise légende (qui est en fait le gestionnaire de tri) ... le problème est que, comme vous pouvez le voir dans le standard events du plugin sortable, il y a le beforeStop mais pas le beforeStart.

C'est le code que j'ai écrit:

$(document).ready(function(){ 
    $("#label-copy-list").sortable({ 
     handle : '.handle', 
     start: function(){ 
      $(".sort-hidden").hide(); 
     }, 
     stop: function(){ 
      $(".sort-hidden").show(); 
     } 
    }); 
}); 

J'ai tryed d'utiliser le lieu événement start, mais il travaille juste à la moitié: il cacher le contenu, mais (je suppose) juste une seconde avant, et la mise en page de les garder « capitonné » comme les sont cachent pas ..

Je sais que tout cela est clair, sauf que, donc je l'ai fait une capture d'écran:

Screenshot 1: la situation « normale » avec tous les contenus visibles, le contenu fond bleu Screenshot 2: que se passe-t-il lorsque l'utilisateur démarre le drag'n'drop; tout le contenu est caché, mais celui que l'utilisateur fait glisser garde une hauteur car son contenu est toujours affiché (en orange l'espace que je ne veux pas avoir) Screenshot 3: ce que je veux avoir quand l'utilisateur commence à drag'n ' déposer les éléments

J'ai été capable de faire ce que je veux en cliquant d'abord sur un autre bouton (qui cache tout le contenu), puis en démarrant le glisser.

Une idée?

Answer 1

Vous pourriez essayer d'utiliser un double-clic pour révéler le contenu, cela rendrait votre vie beaucoup plus facile je pense .... consultez this demo.

$(document).ready(function(){ 
$('#label-copy-list') 
    .sortable() 
    .find('.sort-header').dblclick(function(){ 
    $(this).find('.sort-hidden').toggle(); 
    return false; 
    }) 
}) 

---

Mise à jour: je déconner avec la configuration et si le sort-hidden apparaît, cela fait un peu plus lourd à trier. Donc, j'ai ajouté un événement mousedown pour le cacher. Donc, il finit que vous devez double-cliquer pour révéler, mais un seul clic pour cacher (parce qu'il suppose que vous commencez à trier).

$(document).ready(function(){ 
$('#label-copy-list') 
    .sortable() 
    .find('.sort-header') 
    .dblclick(function(){ 
    $(this).find('.sort-hidden').toggle(); 
    return false; 
    }) 
    .bind('mousedown', function(){ 
    $(".sort-hidden").hide(); 
    }) 
}) 

---

Mise à jour # 2: Hmm, ok que diriez-vous que nous utilisons event.timeStamp de jQuery? Updated demo

$(document).ready(function(){ 
    var last, diff, 
     clickDelay = 500; // milliseconds 
    $('#label-copy-list') 
     .sortable() 
     .find('.sort-header') 
     .bind('mousedown', function(e){ 
      last = e.timeStamp; 
     }) 
     .bind('mouseup', function(e){ 
      diff = e.timeStamp - last; 
      if (diff < clickDelay) { 
       $(this).find('.sort-hidden').toggle(); 
      } 
     }) 
})