您现在的位置是：网站首页> 编程资料编程资料

Html5实现如何在两个div元素之间拖放图像HTML5中的拖放实现详解HTML5拖放功能_动力节点Java学院整理 HTML5拖放API实现拖放排序的实例代码HTML5拖放效果的实现代码详解HTML5中的拖放事件（Drag 和 drop）HTML5 拖放功能实现代码 HTML5+CSS3实现拖放(Drag and Drop)示例HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法html5拖曳操作 HTML5实现网页元素的拖放操作HTML5中实现拖放效果无须借助javascript

2023-10-15 496人已围观

简介调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)通过 dataTransfer.getData(Text) 方法获得被拖的数据，感兴趣的朋友可以参考下哈

原本效果

拖拽之后效果

代码如下

复制代码

代码如下:

[code]

[/code]
它看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

复制代码

代码如下:

拖动什么 - ondragstart 和 setData()

然后，规定当元素被拖动时，会发生什么。

在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

复制代码

代码如下:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

复制代码

代码如下:

event.preventDefault()

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

复制代码

代码如下:

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

代码解释：

调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。被拖数据是被拖元素的 id ("drag1")把被拖元素追加到放置元素（目标元素）中

上一篇：检测浏览器是否支持html5视频的代码HTML5中视频音频的使用详解HTML5+CSS3模仿优酷视频截图功能示例canvas与html5实现视频截图功能示例html5 视频播放解决方案HTML5页面音视频在微信和app下自动播放的实现方法浅谈Html5中视频音频标签进度条的问题使用HTML5在网页中嵌入音频和视频播放的基本方法浅谈基于HTML5的在线视频播放方案HTML5中的音频和视频媒体播放元素小结用HTML5制作视频拼图的教程

下一篇：html5 跨文档消息传输示例探讨HTML5的文档结构和新增标签完全解析HTML5文档结构标签如何在Dreamweaver cs6 中设置默认文档格式为html5HTML5之SVG 2D入门8—文档结构及相关元素总结HTML5 与 XHTML2详解HTML编程的标记与文档结构在HTML文档中嵌入CSS的三种常用方式html文档中的 ol 元素的序号数字极限探讨HTML文档类型详解推荐CSS入门:XHTML文档结构树

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢