javascript - jQuery UI 可排序 : how to emulate the 'beforeStart' event?

Question

我正在使用 jQuery UI sortable plugin用于对一些高字段集(~300px 高度)进行排序。

我的目标是隐藏该字段集的主要内容，仅保持图例标记可见(实际上是可排序处理程序)...问题是，正如您在 standard events 中看到的那样在可排序插件中，有 beforeStop 但没有 beforeStart。

这是我写的代码:

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

我尝试使用 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();
            }
        })
})