jQuery UI可排序：如何模擬'beforeStart'事件？

Question

即時使用jQuery UI sortable plugin排序一些高大的fieldset（~300px高度）。

我的目標是隱藏該字段集的主要內容，只保留可見的圖例標記（實際上是可排序的處理程序）......問題在於，正如您在可排序插件的standard events中看到的那樣，有beforeStop但不是beforeStart。

這是我的代碼中寫道：

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

我tryed使用start事件，而不是，但它只是在半工作：它隱藏的內容，但（我猜）只是前一秒鐘，和它們的佈局保持「填充」作爲他們不是隱藏..

我知道這是所有不同之處在於清楚，所以我做了一些截圖：

Screenshot 1：「正常」情況與所有的內容都可見，內容在空中藍色背景 Screenshot 2：當用戶開始拖放時會發生什麼;所有的內容都隱藏起來，但是用戶拖拽保持高度的內容仍然顯示（橙色的空間我不想擁有） Screenshot 3：當用戶開始拖拽時，刪除項目

我已經能夠通過首先點擊另一個按鈕（即隱藏所有內容）來做我想要的，然後開始拖動。

有什麼想法？

Answer 1

你可以嘗試使用雙擊來顯示內容，它會讓你的生活更容易，我想....檢查出this demo。

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

---

更新：我是用設置瞎搞，如果顯示的sort-hidden，這使得它更爲麻煩排序。所以，我添加了一個mousedown事件來隱藏它。所以最終你必須雙擊才能顯示，但單擊就隱藏（因爲它假定你正在開始排序）。

$(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(); 
    }) 
}) 

---

更新＃2：嗯，確定如何對我們使用jQuery的event.timeStamp？ 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(); 
      } 
     }) 
})