如何防止子元素干扰HTML5 dragover并删除事件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (272)

我有一个<div>,我已将'drop'和'dragover'事件附加到了。该<div>包含图像的锚定标记(简单化:<div><a><img /></a></div>)。目标的子元素似乎阻止“drop”或“dragover”事件被触发。只有拖动的元素位于目标上方,而不是其子元素时,才会按预期触发事件。

我想实现的行为是<div>,无论子元素是否存在,“dragover”和“drop”事件都会触发目标上的任何地方。

提问于
用户回答回答于

拖放规范严重瑕疵,很难符合。

通过跟踪子元素可以实现预期的行为(子元素不会干扰)。

下面是如何做到这一点的一个简短例子(使用jQuery):

jQuery.fn.dndhover = function(options) {
  return this.each(function() {
    var self = jQuery(this);
    var collection = jQuery();

    self.on('dragenter', function(event) {
      if (collection.size() === 0) {
        self.trigger('dndHoverStart');
      }

      collection = collection.add(event.target);
    });

    self.on('dragleave', function(event) {
      collection = collection.not(event.target);

      if (collection.size() === 0) {
        self.trigger('dndHoverEnd');
      }
    });
  });
};

jQuery('#my-dropzone').dndhover().on({
  'dndHoverStart': function(event) {
    jQuery('#my-dropzone').addClass('dnd-hover');

    event.stopPropagation();
    event.preventDefault();
    return false;
  },
  'dndHoverEnd': function(event) {
    jQuery('#my-dropzone').removeClass('dnd-hover');

    event.stopPropagation();
    event.preventDefault();
    return false;
  }
});
用户回答回答于

我搜索了一下,想知道以下几点:

我如何使<img />一个<div draggable="true">...</div>容器的子元素的行为与移动该容器的行为正确?

简单: <img src="jake.jpg" draggable="false" />

扫码关注云+社区

领取腾讯云代金券