html5实现拖放文字功能代码

以下是一个基本的HTML5拖放文本的示例,其中包含一个可拖动的段落和一个用于放置文本的目标区域:

<!DOCTYPE html>
<html>
<head>
	<title>HTML5 Drag and Drop Text Example</title>
	<style>
		#drag-text {
			background-color: #f2f2f2;
			padding: 10px;
			cursor: move;
		}
		
		#drop-area {
			background-color: #ddd;
			padding: 20px;
			min-height: 100px;
		}
	</style>
	<script>
		function allowDrop(event) {
			event.preventDefault();
		}
		
		function drag(event) {
			event.dataTransfer.setData("text", event.target.id);
		}
		
		function drop(event) {
			event.preventDefault();
			var data = event.dataTransfer.getData("text");
			var draggedText = document.getElementById(data).innerHTML;
			event.target.innerHTML = draggedText;
		}
	</script>
</head>
<body>
	<div id="drag-text" draggable="true" ondragstart="drag(event)">Drag me!</div>
	<div id="drop-area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>

在上面的html5实现拖放文字功能代码示例中,drag()函数用于在拖动开始时将数据传输到 dataTransfer 对象中,allowDrop()函数用于防止浏览器阻止放置操作,而 drop()函数用于在放置文本时获取并设置被拖动的文本。