मेरे पास एक पीडीएफ ऑब्जेक्ट और ड्रैग करने योग्य टेक्स्ट वाला एक 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>

पीडीएफ ठीक से प्रस्तुत करता है लेकिन मैं पीडीएफ ऑब्जेक्ट पर नहीं छोड़ सकता, मैं बाकी div में ठीक छोड़ सकता हूं

क्या html ऑब्जेक्ट टैग पर ड्रैग एंड ड्रॉप के बारे में प्रतिबंध हैं? क्या इसके चारों ओर एक रास्ता है ?

1
kofifus 1 अप्रैल 2020, 04:10

1 उत्तर

सबसे बढ़िया उत्तर

सबसे पहले, मुझे पूरी तरह से यकीन नहीं है कि आपके साथ क्या गलत हुआ, लेकिन कुछ कारण हैं जिनकी वजह से आप पीडीएफ ऑब्जेक्ट को ड्रैग और ड्रॉप करने में सक्षम नहीं हो सकते हैं।

सबसे पहले, मुझे लगता है कि पीडीएफ को आईफ्रेम के समान माना जाता है और सैंडबॉक्स किया जाता है - आप आईफ्रेम या पीडीएफ पर माउस ईवेंट का पता नहीं लगा सकते हैं। इस वजह से, आप अपने माउस की स्थिति का पता नहीं लगा पाएंगे जब वह पीडीएफ़ के ऊपर होगा।

इस समस्या का एक समाधान यह होगा कि किसी तत्व को पीडीएफ पर रखा जाए और वह तत्व ड्रॉप करने योग्य तत्व हो, हालांकि, ऐसा लगता है जैसे आप इसे पहले से ही अपने कोड में कर रहे हैं। पीडीएफ मूल तत्व #mydiv के भीतर समाहित है, जिसका अर्थ है कि कुछ और समस्या है।

एक और संभावित मुद्दा यह है कि आपका ड्रैग करने योग्य तत्व ड्रॉप करने योग्य तत्व से बड़ा है। यह कभी-कभी केवल ड्रॉप को स्वीकार करेगा यदि ड्रैग करने योग्य तत्व पूरी तरह से ड्रॉप करने योग्य तत्व की सीमा के भीतर है।

निष्कर्ष निकालने के लिए, मुझे लगता है कि प्रदान किए गए अनुभाग के बाहर आपके कोड में कुछ गड़बड़ है क्योंकि मैं इसे कई मुद्दों के बिना काम करने में कामयाब रहा।

निम्नलिखित कोड स्निपेट क्रोम में मेरे लिए काम करता है, हालांकि अगर आपके लिए कुछ अलग लगता है, तो मैं इसे देख सकता हूं।

नोट - ऐसा लगता है कि आपका कोड लिखने के बाद संशोधित किया गया था, इसलिए यदि आपको इसके लिए सहायता चाहिए तो मुझे बताएं।

$("#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
Drew Snow 5 अप्रैल 2020, 19:09