Question

我有一个组os可排序的元素和一个隐藏的droppable，它是删除元素的垃圾，我在拖动开始时显示垃圾，这没关系。我想要的是只有当我拖动一个元素超过给定的秒数时才显示垃圾。我怎样才能做到这一点？

现在我的代码是

$(".sortable").sortable({
   start: function (event, ui) { $("#trash").slideDown(); },
   stop: function (event, ui) { $("#trash").slideUp(); }
});
$(".sortable").disableSelection();

$("#trash").droppable({
  drop: function (event, ui) { $(ui.draggable).remove(); }
});

Answer 1

您可以使用setTimeout延迟slideDown并清除stop事件中的超时;在这种情况下，重要的是在可排序时将refreshPositions（从draggable继承）选项设置为true，因为在拖动期间DOM更改并且必须将此更改通知给draggable。

文档中的说明：

如果设置为true，则计算所有可放置的位置鼠标移动。警告：这解决了高动态页面上的问题，但是大大降低了性能。

代码：

var delayOpen;

$("#sortable").sortable({
    start: function (event, ui) {
        delayOpen = setTimeout(function () {
            $("#trash").slideDown();
            $("#sortable").sortable("refresh");
        }, 1000);
    },
    stop: function (event, ui) {
        clearTimeout(delayOpen)
        $("#trash").slideUp();
    },
    refreshPositions: true
});
$("#sortable").disableSelection();

$("#trash").droppable({
    over: function (event, ui) {
        console.log('overd')
    },
    drop: function (event, ui) {
        $(ui.draggable).remove();
    }
}).hide();

演示：http://jsfiddle.net/IrvinDominin/7pkRS/

拖动超过X秒的jquery draggable fire事件

1 个答案: