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

一种简单的方法是使用jQuery UI，确保在动态div呈现后使用它。

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

Answer 4

div中有内容吗？我不认为这个元素本身会在这个特定事件中受到拖累。

Answer 5

简短答案：<div>-默认情况下不可拖动，与<a>-s不同。您必须添加 draggable = true ：

<div draggable=true ondragstart=...>HTML</div>

像这样在Firefox 75上工作。