利用html5实现简单的拖动功能

具体方法如下：

1、对象元素的 Drag gable属性设置为true(draggable="true")。还需要注意的是a元素和 img 元素必须指定 hr ef；

2、编写拖拽有关的 事件处理 代码：

（学习视频分享：ht ML 视频教程）

3、案例实现代码：

（1）HTML代码段：

<div id="cun" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
< br  />
<img src="img/html5.png" id="tuo" draggable="true" οndragstart="drag(event)"/>

（2）CSS代码段：

 # tuo{
	width: 540px;
	h ei ght: 320px;
	background: #e54d26;
}
#cun{
	width: 540px;
	height: 320px;
	border: 2px solid #d2d2d2;
	box -s hadow: 1px 4px 8px #646464;
}
img{
	width: 500px;
	height: 280px;
}

（3）JavaScript代码段：

function allowDrop(ev){
	//不执行默认处理（拒绝被拖放）
	ev.p rev entDefault();
};
function drag(ev){
	//使用setData(数据类型，携带的数据)
	//方法将要拖放的数据存入data transfer 对象
	ev.dataTransfer.setData("Text",ev.t arg et.id);
};
function drop(ev){
	//不执行默认处理（拒绝被拖放）
	ev. PR eventDefault();
	//使用getData()获取到数据，然后赋值给data
	 VAR  data = ev.dataTransfer.getData("Text");
	//使用ap PE ndChild方法把拖动的节点放到元素节点中成为其子节点
	ev.target.appendChild(document.getElementById(data));
};

4、实现的效果如下：

（1）未拖放之前：

（2）拖放之后

相关推荐：html5教程

以上就是 利用 html5实现 简单 的拖动功能的详细内容，更多请关注其它相关 文章 ！

总结

以上是 为你收集整理的 利用html5实现简单的拖动功能 全部内容，希望文章能够帮你解决 利用html5实现简单的拖动功能 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于利用html5实现简单的拖动功能的详细内容...