无法拖放到 HTML 对象标签上

Question

I have a div containing an pdf object and a draggable text:我有一个包含 pdf 对象和可拖动文本的 div：

<html>
<head>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}


function drop(ev) { alert("DROP"); }
</script>
</head>
<body>


<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<object type="application/pdf"  ondrop="drop(event)" ondragover="allowDrop(event)"
    data="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
    width="80%"
    height="80%">
</object>
</div>
<br>
<div draggable="true">
  <p>Drag me around</p>
</div>
</body>
</html>

The PDF renderes fine but I cannot drop over the PDF object I can drop fine in the rest of the div PDF 渲染得很好，但我不能放下 PDF 对象，我可以在 div 的其余部分很好地放下

Are there restrictions about drag&drop over html object tags ?在 html 对象标签上拖放是否有限制？ Is there a way around this ?有没有解决的办法？

Answer 1

First of all, I am not entirely sure what went wrong for you, but there are a couple of reasons why you might not be able to drag and drop over the PDF object.首先，我不完全确定您出了什么问题，但是您可能无法在 PDF 对象上拖放的原因有几个。

First of all, I assume PDFs are treated similar to iframes and are sandboxed - you can't detect mouse events over iframes or PDFs.首先，我假设 PDF 的处理方式类似于 iframe 并且是沙盒化的 - 您无法检测 iframe 或 PDF 上的鼠标事件。 Because of this, you won't be able to detect your mouse position when it is over the PDF.因此，当鼠标位于 PDF 上方时，您将无法检测到鼠标位置。

A solution to this problem would be to position an element over the PDF and have that element be the droppable element, however, it seems as if you are already doing this in your code.此问题的解决方案是在 PDF 上放置一个元素，并使该元素成为可放置元素，但是，似乎您已经在代码中执行了此操作。 The PDF is contained within the parent element #mydiv , which means something else is the problem. PDF 包含在父元素#mydiv ，这意味着还有其他问题。

Another possible issue is that your draggable element is larger than the droppable element.另一个可能的问题是您的可拖动元素大于可放置元素。 It will sometimes only accept the drop if the draggable element is fully within the bounds of the droppable element.如果可拖动元素完全在可放置元素的边界内，它有时只会接受放置。

To conclude, I assume something is wrong with your code outside the section provided as I managed to get it working without many issues.总而言之，我假设您的代码在提供的部分之外有问题，因为我设法让它在没有很多问题的情况下正常工作。

The following code snippet works for me in Chrome, however if something seems to be different for you, I can look into it.下面的代码片段在 Chrome 中对我有用，但是如果你觉得有些不同，我可以调查一下。

Note -- It appears your code was modified after writing, so if you need help with that let me know.注意 - 您的代码似乎在编写后被修改，因此如果您需要帮助，请告诉我。

 $("#Thumbs li").draggable(); $('#mydiv').droppable({ accept: '#Thumbs li', drop: function(event, ui) { console.log('Dropped'); } });

 object { border: 1px solid red; } #mydiv { border: 1px solid green; width: 300px; height: 300px; } #Thumbs li { border: 1px solid blue; width: 100px; height: 100px; }

 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <div id="mydiv"> <object id="object" data="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" type="application/pdf" width="100%" height="100%"></object> </div> <ul id="Thumbs"> <li>foo</li> <li>bar</li> <li>baz</li> </ul>

无法拖放到 HTML 对象标签上

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-04-01 01:59:35

无法拖放到 HTML 对象标签上

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-04-01 01:59:35

解决方案1
2 已采纳 2020-04-01 01:59:35