Adding a delay to droppable event

问题

I have a droppable element with a dropover event handler. Dragging an element over the droppable expands a node. However, I want to add a delay so the node does not expand immediately, i.e. you have to hold the draggable over the droppable for a second before it expands.

droppable.over = function(event, ui) {
    // expand node if dragover lasts 1000 milliseconds
    node.expand();
}; 

My first thought was to simply use setTimeout on node.expand(), but this doesn't do what I want, it simply delays the node expanding. It doesn't look like there's any configuration I can set to achieve this, so I'm wondering how I can do it.

回答1:

Something like this maybe?

var globalTimer;

//..
droppable.over = function(event, ui)
{
    globalTimer = setTimeout(function(){node.expand()}, 1000);
},
droppable.out = function(event, ui)
{
    clearTimeout(globalTimer);
};

回答2:

try adding this setTimeout(function () { node.expand() }, 1000);

but I might misunderstood you, do you want the node to appear later or appear only if it stays in the droppable for 1000 ms?

来源：https://stackoverflow.com/questions/11786598/adding-a-delay-to-droppable-event