Javascript ondrag, ondragstart, ondragend

Question

Я пытался использовать ondrag() и некоторые другие функции на div, динамически отображаемые на странице HTML.

Кажется, что ни одно из этих событий не сработало, и я не получил никакихошибки.Я не могу найти много полезной документации по этому вопросу.Я неправильно интерпретирую, можете ли вы использовать эти события для создания сценариев, чтобы перетаскивать div по экрану?

Answer 1

Посмотрите эту документацию: https://developer.mozilla.org/En/DragDrop/Drag_and_Drop

Примечание: он работает не во всех браузерах.

Если вы хотите кросс-браузерную поддержку, используйте jQuery: http://jqueryui.com/demos/draggable/

Пример jQuery:

<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>

<script>
    $(function() {
        $( "#draggable" ).draggable({
            drag: function(event, ui) {}
        });
    });
</script>

Другой пример:

<div id="toBeDragged" draggable="true">
  This text <strong>may</strong> be dragged.
</div>

<script>
document.getElementById('toBeDragged').addEventListener('dragstart', function(event) {
    event.dataTransfer.setData('text/plain', 'This text may be dragged');
});
</script>

Answer 2

Я не слишком часто использовал перетаскивание, но считаю, что это перетаскивание «редактировать действие» - например, выделение текста и перетаскивание его в текстовое поле / текстовое поле.

Возможно, вам потребуется реализовать собственные обработчики onmousedown() onmouseup() и onmousemove() для функциональности, которая, я думаю, вам нужна

Answer 3

Есть ли контент в div? Я не думаю, что именно этот элемент перетаскивается в этом конкретном событии.

Answer 4

Простой способ сделать это с помощью пользовательского интерфейса jQuery, убедитесь, что вы используете его после рендеринга динамического div.

$(document).ready(function () {
    $('.my_draggable_elements').draggable({
        drag: function(){
          // do something
        }
    });
});