HTML5 DragOver throttling

Question

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

Answer 1

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