拖放到 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({ accept: ..., drop: (event, ui) => ... activate: (event, ui) => $(`#pdfmask`).css('pointer-events', 'auto'), deactivate: (event, ui) => $(`#pdfmask`).css('pointer-events', 'none'),}); -
绝地无双
首先，我不完全确定您出了什么问题，但有几个原因可能导致您无法拖放 PDF 对象。首先，我假设 PDF 的处理方式与 iframe 类似，并且是沙盒的 - 您无法检测 iframe 或 PDF 上的鼠标事件。因此，当鼠标位于 PDF 上方时，您将无法检测到鼠标位置。此问题的解决方案是将一个元素放置在 PDF 上，并使该元素成为可放置元素，但是，似乎您已经在代码中执行了此操作。PDF 包含在父元素中#mydiv，这意味着问题出在其他地方。另一个可能的问题是您的可拖动元素大于可放置元素。有时，仅当可拖动元素完全位于可放置元素的边界内时，它才会接受放置。总而言之，我认为您的代码在所提供的部分之外存在问题，因为我设法使其正常工作而没有出现很多问题。以下代码片段在 Chrome 中适用于我，但是如果您觉得有什么不同，我可以研究一下。注意——您的代码在编写后似乎已被修改，因此如果您需要帮助，请告诉我。$("#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>
随时随地看视频慕课网APP
相关分类
Html5