HTML5原生api -- 拖放

最新推荐文章于 2024-05-20 17:51:14 发布

苏喂苏喂苏喂su

最新推荐文章于 2024-05-20 17:51:14 发布

阅读量377

点赞数

分类专栏： HTML/HTML5 文章标签： HTML5

本文链接：https://blog.csdn.net/joyvonlee/article/details/86706901

版权

HTML/HTML5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、被拖放放的元素需要设置属性draggable为true，这是元素可被进行拖放的前提；

2、被拖动时的事件属性（ondragstart），当元素被拖动的时候，事件里需要调用该方法：ev.dataTransfer.setData("Text",ev.target.id)；该方法的数据类型是“Text”，值是可拖动元素的id 。

3、放到什么地方，ondragover事件属性规定在什么位置（什么元素上）放置被拖动的数据；元素默认无法放置其它的元素，如需要放置，则需要阻止元素的默认处理方式；这需要调用ondragover的event.preventDefault()方法。

4、进行放置，ondrop事件属性；进行放置时，需要阻止元素的默认处理方式；然后通过event.dataTransfer.getData("Text")方法获取被拖动的数据；最后将被拖动的数据放置到放置的目标元素中。

实例：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
	div{
		width: 100px;
		height: 100px;
		margin: 100px;
		border: 1px solid #000;
	}

</style>
<script type="text/javascript">
	function drag (ev) {
		ev.dataTransfer.setData("Text",ev.target.id);
	}

	function allow (ev) {
		ev.preventDefault();
	}

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

	}
</script>
</head>
<body>
	<div id="container1" class="container1" ondragover="allow(event)" ondrop="drop(event)"></div>
	
	<div class="container2" ondragover="allow(event)" ondrop="drop(event)">
		<span id="span1" draggable="true" ondragstart="drag(event)">text</span>
	</div>

</body>
</html>