Question

我一直在寻找这个问题一段时间了，但我能找到的就是如何启动拖放或如何防止它如果你正在使用那个特定的库。

我有一个完美的dropzone工作，但是当用户错过了dropzone并意外地将其拖入页面页眉或页脚时，会出现问题。浏览器执行默认行为，只是在浏览器中加载图像。

有没有办法阻止用户将图片拖入这些div？

我抓住像这样的元素

$(window.parent.document.body).find('#header-content')
$(window.parent.document.body).find('#footer-content')

我已尝试附加防止默认值等，但到目前为止没有运气。我应该提一下，我正在以这种方式抓住这些元素，因为我正在使用iframe（哎呀!!!）这是确保我拥有正确元素的最简洁方法。

Answer 1

这是一个javascript解决方案，随意将其重写为jQuery：

myElement.addEventListener("dragover", function(e) {
  e.preventDefault();
}, false);
myElement.addEventListener("drop", function(e) {
  e.preventDefault();
}, false);

将myElement替换为您的DOM元素。您需要{em} {em> 来阻止此行为。

Answer 2

您可以使用jQuery-UI-Draggable和jQuery-UI-Draggable并按照以下方式执行操作：

<强> HTML

<div>
  <img class="choice" src="http://www.jquery-az.com/html/images/banana.jpg">
  <img class="choice" src="http://www.jquery-az.com/html/images/strawberries.jpg">
</div>

<div class="headear">
  headear
</div>

<div class="dropzone">
  dropzone
</div>

<div class="footer">
  footer
</div>

<强> JS

$(".choice").draggable({
  cursor: 'move',
  helper: "clone",
});

$(".dropzone").droppable({
  hoverClass: 'hover',
  drop: function(ev, ui) {
    $item = $(ui.helper).clone();
    $(this).append($item);
  }
});

Online Demo (jsFiddle)

防止默认将图像拖放到浏览器中

2 个答案: