27(拖放事件)drag事件2

发布时间：2024年01月19日
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>drag</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		img {
			width: 150px;
		}
		.content {
			width: 500px;
			height: 500px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<!-- 将要被拖动的元素 -->
	<img src="../03_音视频/media/01.jpg">
	<img src="../03_音视频/media/02.jpg">
	<img src="../03_音视频/media/03.jpg">


	<!-- 放置被拖动元素的容器 -->
	<div class="content" ></div>

	<script type="text/javascript" src="../jquery-3.2.1.js"></script>
	<script type="text/javascript">
		// 原生js
		var imgs = document.querySelectorAll('img');
		var content = document.querySelector('.content');

		var aim;
		for (var i = 0; i < imgs.length; i++) {
			imgs[i].ondragstart = function(e) {
				console.log(this);
				console.log(e.target);

				aim = e.target;
			}
		}

		//默认情况下,数据/元素不能在其他元素中拖放,对drop必须组织元素的默认处理
		content.ondragover = function() {
			event.preventDefault();
		}

		content.ondrop = function() {
			content.appendChild(aim);
		}
	</script>
</body>
</html>

?上述运行结果：

文章来源:https://blog.csdn.net/q506174602/article/details/135647751
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章