Javascript ondrag, ondragstart, ondragend
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4367055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript ondrag, ondragstart, ondragend
提问by Tom Gullen
I've been trying to use ondrag()and some other functions on a divrendered dynamically on an HTMLpage.
我一直在尝试在页面ondrag()上div动态渲染时使用和其他一些功能HTML。
None of these events seem to fire, nor do I get any errors. I can't find much helpful documentation on it either. Am I interpreting it wrongly, can you use these events to script functionality to drag a div around the screen?
这些事件似乎都没有触发，我也没有收到任何错误。我也找不到很多有用的文档。我是否错误地解释了它，您可以使用这些事件编写脚本功能以在屏幕上拖动 div 吗？
采纳答案by Tower
Have a look at this documentation: https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
看看这个文档：https: //developer.mozilla.org/En/DragDrop/Drag_and_Drop
Note: It does not work in every browser.
注意：它不适用于所有浏览器。
If you want a cross-browser support use jQuery: http://jqueryui.com/demos/draggable/
如果您想要跨浏览器支持，请使用 jQuery：http: //jqueryui.com/demos/draggable/
jQuery example:
jQuery 示例：
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<script>
$(function() {
$( "#draggable" ).draggable({
drag: function(event, ui) {}
});
});
</script>
Another example:
另一个例子：
<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>
回答by Basic
I haven't used drag myself much but I believe it's the drag "edit action" - eg selecting text and dragging it within a textbox/textarea.
我自己并没有使用过多的拖动，但我相信这是拖动“编辑操作” - 例如选择文本并将其拖动到文本框/文本区域中。
You may need to implement your own onmousedown()onmouseup()and onmousemove()handlers for the functionality I think you're after
您可能需要实现自己onmousedown()onmouseup()和onmousemove()处理程序的功能，我认为你是后
回答by Q_Mlilo
An easy way to do this is with jQuery UI, make sure you use it after your dynamic divhas been rendered.
一种简单的方法是使用 jQuery UI，确保div在呈现动态后使用它。
$(document).ready(function () {
$('.my_draggable_elements').draggable({
drag: function(){
// do something
}
});
});
回答by Erik Reppen
Is there content in the div? I don't think it's the element itself that gets dragged in this particular event.
div里面有内容吗？我不认为在这个特定事件中被拖拽的是元素本身。
回答by MKaama
Short answer: <div>-s are not draggable by default, unlike <a>-s. You must add draggable=true:
简短回答：<div>-s 默认情况下不可拖动，与<a>-s. 您必须添加draggable=true：
<div draggable=true ondragstart=...>HTML</div>
Works on Firefox 75 like that.
像这样在 Firefox 75 上工作。
