【问题标题】:jQuery Drop event not firingjQuery Drop 事件未触发
【发布时间】:2016-08-05 17:12:02
【问题描述】:

我正在尝试将链接 (.link) 从一个 div (.folder) 移动到另一个,但 drop 事件没有触发。我想我通过阻止 Dragenter 和 dragover 事件中的默认行为来制作所有 .link div 可放置区域。代码如下:

$(document).ready(function() {
    //Logic for create folder button
    $("#create-folder-button").click(createFolder);

    // //Logic for drag and drop for the links
    $(".folder").on("dragstart", function(e) {
        console.log("dragstart");
    });
    $(".folder").on("dragenter dragover", function(e) {
        e.preventDefault();
    });
    $(".folder").on("drop", function(e) {
        e.preventDefault();
        console.log("drop");
    });
});

“dragstart”打印但“drop”不打印。

【问题讨论】:

  • 请提琴并解释您的期望?
  • 现在我只想打印“drop”。我有几个带有“文件夹”类和 s 的 div。我想在 div 周围移动它们。
  • 这段代码是否包含在$(document).ready(){ } 中?如果不是,并且这发生在 folder 被定义之前,那可能就是问题所在。
  • 是的。 “dragstar”打印,但 drop 不打印。

标签: javascript jquery html


【解决方案1】:

你需要使用event.stopPropagation():

$(".folder").on("drop", function(event) {
    event.preventDefault();  
    event.stopPropagation();
    alert("Dropped!");
});

【讨论】:

  • @JoaquimFerrer 有点晚了!正如该方法所建议的那样,它阻止了事件在 DOM 中传播通常的提交“链”——比如这个按钮在一个表单中,preventDefault 阻止按钮的默认事件发生,stopPropagation 阻止事件激活表单提交 - 它们一起处理上下文 this 默认事件和任何副作用事件
猜你喜欢
  • 1970-01-01
  • 2014-02-11
  • 2014-02-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-03-01
相关资源
最近更新 更多