我有一個(gè)包含 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 對象標(biāo)簽的拖放有限制嗎？有沒有解決的辦法 ？
2 回答
慕標(biāo)5832272
TA貢獻(xiàn)1966條經(jīng)驗(yàn) 獲得超4個(gè)贊
解決方案最終非常復(fù)雜，這里是一個(gè)概述：
使用定位 pdf 對象
position:absolute使用以下命令創(chuàng)建覆蓋 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'),
});
絕地?zé)o雙
TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超4個(gè)贊
首先，我不完全確定您出了什么問題，但有幾個(gè)原因可能導(dǎo)致您無法拖放 PDF 對象。
首先，我假設(shè) PDF 的處理方式與 iframe 類似，并且是沙盒的 - 您無法檢測 iframe 或 PDF 上的鼠標(biāo)事件。因此，當(dāng)鼠標(biāo)位于 PDF 上方時(shí)，您將無法檢測到鼠標(biāo)位置。
此問題的解決方案是將一個(gè)元素放置在 PDF 上，并使該元素成為可放置元素，但是，似乎您已經(jīng)在代碼中執(zhí)行了此操作。PDF 包含在父元素中#mydiv，這意味著問題出在其他地方。
另一個(gè)可能的問題是您的可拖動元素大于可放置元素。有時(shí)，僅當(dāng)可拖動元素完全位于可放置元素的邊界內(nèi)時(shí)，它才會接受放置。
總而言之，我認(rèn)為您的代碼在所提供的部分之外存在問題，因?yàn)槲以O(shè)法使其正常工作而沒有出現(xiàn)很多問題。
以下代碼片段在 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 關(guān)注
- 147 瀏覽
添加回答
舉報(bào)
0/150
提交
取消