如何使用html5实现简单的拖动功能

这篇文章主要介绍如何使用html5实现简单的拖动功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联公司是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发,网站制作,网站设计,网站模板,微信公众号开发,软件开发,成都小程序开发,十载建站对服务器托管等多个行业,拥有多年的网站维护经验。

具体方法如下:

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

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

如何使用html5实现简单的拖动功能

3、案例实现代码:

(1)HTML代码段:


(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)未拖放之前:

如何使用html5实现简单的拖动功能

(2)拖放之后

如何使用html5实现简单的拖动功能

以上是“如何使用html5实现简单的拖动功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


名称栏目:如何使用html5实现简单的拖动功能
浏览路径:http://myzitong.com/article/pipipj.html