CODEWITHSUNDEEP
javascripthtmldrag-and-drop
Hassaki
Hassaki

Reputation: 129

HTML5 DragOver throttling

I have one question: If I throttle dragOver function why there is blinking stop singal over all the time except throttling timeouts?

What is the proper way to throttle dragover? I've made a simple demo of this (chrome 68.0.3440.106)

http://jsfiddle.net/2bco65j8/

$(document).on("dragover", ".nest-source.throttle", $.throttle( 100, 
    true,function(e) {
    console.log("throttling");
    e.preventDefault();
}))


$(document).on("dragover", ".nest-source.nothrottle", function(e) {
    console.log("wo throttling");
    e.preventDefault();
})

Upvotes: 0

Views: 1576

Answers (1)

Dobrin Tinchev
Dobrin Tinchev

Reputation: 391

To allow drop on the element you need call preventDefault on the event. Events will be fired no matter of the throttling and if you don't call the preventDefault method the drag block icon will be shown. What the $.throttle does is to create a new function that checks how many time has passed since the last execution of your callback and fires your callback only once the specified duration has passed. Hence you are only allowing the drop once every 100ms and this is why the icon flickers.

You cloud do something like 

const throttledDragOver = (duration, callback) => {
    var throttledCallback = $.throttle(duration, true, () => callback());
    return e => {
    e.preventDefault();    
    throttledCallback();
  }
}

you can see it in action here

Upvotes: 4

Related Questions