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

具体方法如下：

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

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

（学习视频分享：htML视频教程）

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;
    	height: 320px;
    	background: #e54d26;
}
#cun{
    	width: 540px;
    	height: 320px;
    	border: 2px solid #d2d2d2;
    	box-shadow: 1px 4px 8px #646464;
}
img{
    	width: 500px;
    	height: 280px;
}
    

（3）JavaScript代码段：

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

4、实现的效果如下：

（1）未拖放之前：

（2）拖放之后

相关推荐：html5教程

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！