我有一个包含 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 对象标签的拖放有限制吗？有没有解决的办法 ？
2 回答
慕标5832272
TA贡献1966条经验 获得超4个赞
解决方案最终非常复杂，这里是一个概述：
使用定位 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'),
});
绝地无双
TA贡献1946条经验 获得超4个赞
首先，我不完全确定您出了什么问题，但有几个原因可能导致您无法拖放 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>
- 2 回答
- 0 关注
- 90 浏览
添加回答
举报
0/150
提交
取消