CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-draggablejquery-ui-droppable
Tyler Treat
Tyler Treat

Reputation: 15018

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.

Upvotes: 1

Views: 2169

Answers (2)

AceCorban
AceCorban

Reputation: 2103

Something like this maybe?

var globalTimer;

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

Upvotes: 4

m3div0
m3div0

Reputation: 1596

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?

Upvotes: 0

Related Questions