猿问

拖放到 HTML 对象标签上

我有一个包含 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>

PDF 渲染得很好，但我无法将 PDF 对象放在上面，我可以将其放在 div 的其余部分中


对 html 对象标签的拖放有限制吗？有没有解决的办法 ？


ITMISS
浏览 91回答 2
2回答

慕标5832272

解决方案最终非常复杂，这里是一个概述：使用定位 pdf 对象position:absolute使用以下命令创建覆盖 pdf 对象的同级掩码 div：position:absolute;z-index:100;background:transparent;pointer-events:none;使遮罩 div 可放置并添加用于添加/删除的事件pointer-events：$(`#pdfmask`).droppable({&nbsp; accept: ...,&nbsp; drop: (event, ui) => ...&nbsp; activate: (event, ui) => $(`#pdfmask`).css('pointer-events', 'auto'),&nbsp; deactivate: (event, ui) => $(`#pdfmask`).css('pointer-events', 'none'),});
0

绝地无双

首先，我不完全确定您出了什么问题，但有几个原因可能导致您无法拖放 PDF 对象。首先，我假设 PDF 的处理方式与 iframe 类似，并且是沙盒的 - 您无法检测 iframe 或 PDF 上的鼠标事件。因此，当鼠标位于 PDF 上方时，您将无法检测到鼠标位置。此问题的解决方案是将一个元素放置在 PDF 上，并使该元素成为可放置元素，但是，似乎您已经在代码中执行了此操作。PDF 包含在父元素中#mydiv，这意味着问题出在其他地方。另一个可能的问题是您的可拖动元素大于可放置元素。有时，仅当可拖动元素完全位于可放置元素的边界内时，它才会接受放置。总而言之，我认为您的代码在所提供的部分之外存在问题，因为我设法使其正常工作而没有出现很多问题。以下代码片段在 Chrome 中适用于我，但是如果您觉得有什么不同，我可以研究一下。注意——您的代码在编写后似乎已被修改，因此如果您需要帮助，请告诉我。$("#Thumbs li").draggable();$('#mydiv').droppable({&nbsp; accept: '#Thumbs li',&nbsp; drop: function(event, ui) {&nbsp; &nbsp; console.log('Dropped');&nbsp; }});object {&nbsp; border: 1px solid red;}#mydiv {&nbsp; border: 1px solid green;&nbsp; width: 300px;&nbsp; height: 300px;}#Thumbs li {&nbsp; border: 1px solid blue;&nbsp; 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">&nbsp; <object id="object" data="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"&nbsp; &nbsp; type="application/pdf" width="100%" height="100%"></object></div><ul id="Thumbs">&nbsp; <li>foo</li>&nbsp; <li>bar</li>&nbsp; <li>baz</li></ul>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答