CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
FabioG
FabioG

Reputation: 2986

jquery draggable fire event if dragging for more than X seconds

I have a group os sortable elements and a hidden droppable wich is the trash to remove elements and I'm showing the trash when dragging starts, that's ok. What I want is to show the trash only if I'm dragging an element for more than a given number of seconds. How can I achieve this?

right now my code for this is

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

Upvotes: 1

Views: 662

Answers (1)

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can delay the slideDown using a setTimeout and clear the timeout in the stop event; in this case it's important to set refreshPositions (inherited from draggable) option to true in you sortable because the DOM change during dragging and this change must be notified to the draggable.

A note from the docs:

If set to true, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.

Code:

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

Demo: http://jsfiddle.net/IrvinDominin/7pkRS/

Upvotes: 1

Related Questions