当前位置:主页 > 收藏界 > 海外掠影 > 正文

Html5实现拖拽复制功能 悍匪的巅峰

2018-05-30 18:37 作者:admin

拖拽是一种常见的特性,即抓取对象以后拖到另一个位置。 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽。 Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需要实现Html5拖拽复制的功能,Html5拖拽复制很简单,只需要在普通Html5拖拽的过程中做一点小小的改动即可。


浏览器支持:

Internet Explorer 9

Firefox

Opera 12

Chrome

Safari 5


代码部分

请把 Windows Azure 的图片拖放到矩形中:






代码解析

实现思路就是克隆被拖拽的元素,然后把克隆元素appendChild()到指定位置

实现Html5拖拽复制的核心代码.cloneNode()

Html5拖拽复制完成以后,其实还有很多事情可以在appendChild()执行以后完成,这个看具体需求吧

如果只是想实现传统的HTML5拖拽的话,移除var item = document.getElementById(data).cloneNode();,然后ev.target.appendChild(data);即可。

最近关注

热点内容

更多