Javascript ondrag, ondragstart, ondragend

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

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

8
drag-and-drop javascript

4 ответов

взгляните на эту документацию: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>
10

Я не использовал перетаскивание себя много, но я считаю, что это перетаскивание "редактировать действие" - например, выбор текста и перетаскивание его в текстовое поле/textarea.

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

1

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

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

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

0