我有一個包含 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 關注
- 148 瀏覽
添加回答
舉報
0/150
提交
取消