时间戳

首页 > 解决方案 > HTML5 DragOver 节流

javascript - HTML5 DragOver 节流

问题描述

我有一个问题：如果我限制 DragOver 功能，为什么除了限制超时之外一直闪烁停止信号？

节流拖拽的正确方法是什么？我做了一个简单的演示（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();
})

标签： javascripthtmldrag-and-drop

解决方案

要允许放置元素，您需要在事件上调用 preventDefault。无论节流如何，都会触发事件，如果您不调用 preventDefault 方法，则会显示拖动块图标。$.throttle 所做的是创建一个新函数，该函数检查自上次执行回调以来已经过去了多少时间，并且仅在经过指定的持续时间后才触发回调。因此，您只允许每 100 毫秒丢弃一次，这就是图标闪烁的原因。

你云做类似的事情

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

你可以在这里看到它的作用

推荐阅读