Невозможно перетащить тег HTML объекта - PullRequest
Новая
       1

Невозможно перетащить тег HTML объекта

0 голосов
/ 01 апреля 2020

У меня есть div, содержащий объект pdf и перетаскиваемый текст: 

<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 тегов объектов? Есть ли способ обойти это?

1 Ответ

1 голос
/ 01 апреля 2020

Прежде всего, я не совсем уверен, что для вас пошло не так, но есть несколько причин, по которым вы не сможете перетаскивать объект PDF.

Прежде всего, я предполагаю, что PDF-файлы обрабатываются аналогично iframes и помещаются в «песочницу» - вы не можете обнаружить события мыши над iframes или 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...