Question

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.

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