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

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

1 个答案: