以下是一个基本的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()函数用于在放置文本时获取并设置被拖动的文本。
评论