It's not entirely clear what caused the issue you encountered with dragging and dropping over the PDF object. There are a few potential reasons why this might be happening.
Firstly, PDFs are often treated similarly to iframes and are sandboxed, which means that mouse events may not be detected over them. This could explain why you're unable to detect the mouse position when it's over the PDF.
One workaround for this issue is to position an element on top of the PDF and make that element the droppable area. However, based on your code snippet, it seems like you've already implemented this. Since the PDF is within the parent element #mydiv, there must be another factor causing the problem.
Another possible explanation is that the draggable element is larger than the droppable area. In some cases, the drop will only register if the draggable element is completely within the boundaries of the droppable area.
In conclusion, it's likely that the issue lies somewhere else in your code outside of the provided section. I was able to get it working smoothly without major glitches.
The JavaScript code below works well in Chrome for me. If you're experiencing different results, feel free to share more details so I can investigate further:
$("#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>