知识点
相关文章
更多最近更新
更多HTML5 Drag and Drop【HTML5教程 - 第六篇】
2019-03-17 22:48|来源: 未知
拖放/拖拽(drag and drop)是HTML5的标准之一。
拖放/拖拽(drag and drop)
这是个非常普遍的功能。你可以抓住一个对象，并且拖动到你想放置的区域。 很多javascript都类似实现了相关的功能，例如，jQueryUI的drag and drop组件。
在HTML5中，拖放/拖拽(drag and drop)是标准，任何元素都支持。
浏览器支持
IE9，Firefox，Chrome和Safari 5都支持这个特性。
注意：Safari 5.1.2不支持
拖放/拖拽(drag and drop)演示
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>看起来可能有点儿复杂，但是这个例子演示了拖拽事件的所有内容。
使得一个元素可以拖动
非常简单，只需要将一个元素的拖动属性修改为draggable，如下：
<img draggable="true" />
如何拖动 - ondragstart() 和 setData()方法
然后，我们指定当一个元素拖动的时候会执行的操作。
在上面的演示中，ondragstart属性调用了一个方法， drag(event)，这里指定了那个数据被拖动。
dataTransfer.setData()方法设置了数据类型和被拖动的数据：
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}在这里例子中，data type是"Text"，数值是被拖动元素的ID。
哪里去放置(drop) - ondragover
ondragover事件指定了拖动的元素可以被放置的位置。
缺省，数据/元素不能被drop到另外的元素。 为了允许drop，你需要先阻止缺省的处理方式。我们可以调用event.preventDefault()方法，如下：
event.preventDefault()
执行放置(drop)
当可拖动的数据被drop的时候，drop事件触发。
在上面的例子中，ondrop属性可以调用一个方法，drop(event)：
function drop(ev){
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}以上代码：
使用dataTransfer.getData("Text")得到被拖动的数据。这个方法将会返回setData()方法中设置的任何数据。
被拖动的数据是可以拖动元素("drag1")的id
添加可拖动的元素到放置的元素
调用preventDefault()方法来阻止浏览器的缺省数据处理方式(例如，打开链接)
如果大家想看看一个完整功能的拖拽实现，请参考这篇教程：分享一个HTML5的drag and drop API实现的图片拖拽分组效果
本文链接：HTML5教程 - 第六篇：HTML5 Drag and Drop，转自：http://www.gbin1.com/tutorials/html5-tutorial/html5-drag-and-drop/
相关问答
更多-
拖放示例 - HTML5(Drag and drop example - HTML5)[2022-06-15]
有几个问题。 首先，你的dropzone需要通过拖动来取消事件：-
function dragOverHandler(event) {
event.preventDefault();
return false;
}
其次，你的dropHandler处理函数会被触发几次，因为大多数情况下，放置目标将 ...
-
HTML5拖放(HTML5 Drag and Drop)[2022-09-02]
如果你想自己做拖放，你可能想要一个div包围可拖动的div，所以你可以使用较大的div的顶部作为可拖动区域。 所以你有了这个代码纯粹是例如，不会工作，顺便说一句。 因此，在draggablediv上，您将放置一个oncl ...... -
删除ondragover属性（下面的代码中的最后一行）对我有用： function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.target.removeAttribute("ondragover"); } Removing the ondragover att ...
-
我不能让你的小提琴工作，所以我给出一般性评论而不是一个完整的“答案”，所以希望它有所帮助！ 对于D＆D，我发现最有效的方法是在页面加载时将mousedown事件附加到文档（或者如果更合适，则将可拖动对象的包含元素附加）。 在此阶段不要将任何事件附加到可拖动元素本身。 在mousedown上，检查目标的classname / id以及它是否可拖动： 如果要显示它的拖动，克隆元素并追加到一个位置：fixed或：absolute DIV - 你可以在mousemove上相对于光标移动它。 保持此元素偏移到光标意味 ...
-
基于拖放的HTML5游戏(HTML5 game based on drag and drop)[2023-09-17]
RaphaelJS是画布的一个很好的替代品。 该库允许您在屏幕上定义对象并为其设置动画。 它有许多在游戏构建中有用的功能： CSS属性的自动动画。 内置拖放功能。 鼠标和触摸（！）事件处理。 内置命中测试。 兼容旧浏览器（是的，谈论你的Internet Explorer！） 改变元素 - 移动，旋转，缩放 高级位置跟踪（转换） 一个成熟的记录 如果你是艺术家，你可以在游戏中使用adobe Illustrator艺术。 A good alternative to canvas is RaphaelJS. Th ... -
使用addEventHandler('dragstart', ...)设置dragstart属性不仅仅是表示法的问题。 你可以而且应该坚持使用addEventHandler 。 但是，应该没有问题，使用这种“风格：” var myFunction = function() {} myElement.addEventListener('dragstart', myFunction, ...); 编辑 好的，所以这并没有直接回答这个问题，但我认为确实需要在这个背景下加以解决。 写作 var myFuncti ...
-
在HTML5中拖放画布(Drag and Drop canvas in HTML5)[2023-05-23]
本教程可能会为您提供有关拖放功能的一些指示。 This tutorial might be able to give you some pointers on the drag and drop functionality. -
HTML5拖放移动版(HTML5 Drag & Drop for Mobile)[2024-01-08]
不幸的是，除了Internet Explorer Mobile 10以及Opera的一个不推荐的Presto版本（现在已被基于Webkit的版本取代）之外，任何移动浏览器目前都不支持拖放。 请参阅http://caniuse.com/#feat=dragndrop 最好的解决方案是检测拖放支持 （确保这不会在支持API的移动版浏览器中给出误报），然后使用JavaScript在移动设备上进行填充。 这还有助于在旧版浏览器版本中提供对早期本机支持拖放的支持。 您可以使用优秀的YepNope条件加载库来运行测试， ... -
我最近创建了一个应用程序，它允许用户在数百个列表（拖放区域）之间拖放数百个项目（包含大量CSS），并且我使用jQuery时遇到了可怕的表现。 然后，我转而使用HTML5 Drag and Drop API，因为即使在第一代Centrinos上，整个系统也能顺利运行。 难怪，因为使用本地代码。 HTML5 API需要习惯，因为它通常是用非鼠标控制的设备来编写的，但是结果并不比jQuery UI代码更复杂。 因此，作为一个结论，我认为只有少量的项目需要拖动时，坚持使用jQuery UI才行。 我也希望jQuer ...
-
是否拖放HTML5功能？(Is drag & drop an HTML5 feature?)[2022-05-05]
对此没有确切的答案。 HTML5与HTML不同 - HTML是一种简单的基于标记的脚本工具。 HTML5也是。 但它提供了更多。 但它仍然不是一种语言。 它自己的HTML5无法实现动画。 因为JavaScript和CSS仍然必须至少使用。 但是你会经常听到有人说“这是用HTML5完成的”。 所有这一切真正意味着他们将一堆东西结合在一起，以达到理想的效果。 它本身不仅仅是一种语言。 甚至你在那里指定的链接也非常明确地说它正在使用外部API来实现拖放效果。 There is no real exact answ ...