javascript Js - 拖放

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript Js - 拖放相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
	<title>Drag and Drop</title>
	<style>
	#box{
		width:300px;
		height:150px;
		padding:10px;
		border:1px solid #ccc;
	}
	</style>

	<script>
		function allowDrop(ev){
			ev.preventDefault();
		}

		function drag(ev){
			ev.dataTransfer.setData("text", ev.target.id);
		}

		function drop(ev){
			ev.preventDefault();
			var data = ev.dataTransfer.getData("text");
			ev.target.appendChild(document.getElementById(data));
		}
	</script>
</head>
<body>
	<div id="box" ondrop="drop(event)" ondragover="allowDrop(event)">

	</div>

	<img id="drag1" src="logo.png" draggable="true" ondragstart="drag(event)" width="291" height="145">

	<h1 contenteditable="true">This text can be edited</h1>
</body>
</html>

以上是关于javascript Js - 拖放的主要内容，如果未能解决你的问题，请参考以下文章

使用 svg 库和 javascript 优化拖放

JavaScript 模块模式和拖放 API

javascript DIV上下拖放功能

Javascript拖放：成功拖放后删除拖动的元素

深入理解javascript原生拖放

Javascript：拖放图像标签