图片文件拖拽示例

2026-03-16 11:02:56 网络作者：本站点击：

图片文件拖拽示例

js代码：

// JavaScript Document
function init() {
    var source = document.getElementById("dragme");
    var dest1 = document.getElementById("text1");
    // (1) 拖放开始
    source.addEventListener("dragstart", function (ev) {
        var dt = ev.dataTransfer;// 追加数据
        dt.effectAllowed = 'all';
        //(2) 拖动元素为dt.setData("text/plain", this.id); 
        dt.setData("text/plain", "哟吼，我进来了");
    }, false);
    // (3) drop:被拖放
    dest1.addEventListener("drop", function (ev) {
        var dt = ev.dataTransfer;// 从DataTransfer对象那里取得数据
        var text = dt.getData("text/plain");
        dest1.textContent += text;
    }, false);
    // (4) dragend：拖放结束
    source.addEventListener("dragend", function (ev) {
        source.style.position="absolute";
        source.style.top=event.clientY-75+'px';
        source.style.left=event.clientX-75+'px';
        ev.preventDefault();//不执行默认处理（拒绝被拖放）
    }, false);
}
//(5) 设置页面属性，不执行默认处理（拒绝被拖放）
document.ondragover = function (e) {
    e.preventDefault();
};
document.ondrop = function (e) {
    e.preventDefault();
}

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖放示例</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body onload="init()">
<div class="mr-cont">
  <h1>拖放图片和文字效果</h1>
  <!--设置draggable属性为true -->
  <div id="box"> 
    <img src="img/face.png" title="我是可以被拖走的"id="dragme">
  </div>
  <div id="text1" ></div>
</div>
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>

js代码讲解：

让我来逐行为您解释这段HTML5文件拖拽的JavaScript代码：

function init() {
	var source = document.getElementById("dragme");
	var dest1 = document.getElementById("text1");

第一行定义了init函数，用于初始化拖拽功能。接下来两行通过getElementById获取两个DOM元素：source是被拖拽的元素（ID为"dragme"），dest1是目标放置区域（ID为"text1")。

	// (1) 拖放开始
	source.addEventListener("dragstart", function (ev) {
		var dt = ev.dataTransfer;// 追加数据
		dt.effectAllowed = 'all';
		//(2) 拖动元素为dt.setData("text/plain", this.id); 
		dt.setData("text/plain", "哟吼，我进来了");
	}, false);

这部分处理拖拽开始事件。当用户开始拖拽source元素时触发：

ev.dataTransfer用于存储拖拽过程中传递的数据
dt.effectAllowed = 'all'设置允许所有拖拽效果
dt.setData("text/plain", "哟吼，我进来了")将自定义文本数据存储到拖拽数据中

	// (3) drop:被拖放
	dest1.addEventListener("drop", function (ev) {
		var dt = ev.dataTransfer;// 从DataTransfer对象那里取得数据
		var text = dt.getData("text/plain");
		dest1.textContent += text;
	}, false);

这部分处理放置事件。当用户在dest1区域释放鼠标时触发：

从dataTransfer对象中获取之前存储的文本数据
将获取到的文本追加到dest1元素的内容中

	// (4) dragend：拖放结束
	source.addEventListener("dragend", function (ev) {
		source.style.position="absolute";
		source.style.top=event.clientY-75+'px';
		source.style.left=event.clientX-75+'px';
		ev.preventDefault();//不执行默认处理（拒绝被拖放）
	}, false);

这部分处理拖拽结束事件。当拖拽操作完成时触发：

设置source元素为绝对定位，并根据鼠标位置调整其坐标
ev.preventDefault()阻止默认的拖拽处理行为

}
//(5) 设置页面属性，不执行默认处理（拒绝被拖放）
document.ondragover = function (e) {
	e.preventDefault();
};
document.ondrop = function (e) {
	e.preventDefault();
}

最后两行设置整个文档级别的拖拽处理：

document.ondragover当元素被拖拽到页面上时阻止默认行为
document.ondrop当元素被放置到页面上时也阻止默认行为

这些设置确保了拖拽操作能够正常工作，而不是触发浏览器的默认行为（如打开文件或跳转页面）。

在拖拽操作中，preventDefault()方法用于阻止浏览器的默认行为。例如，当文件被拖拽到浏览器窗口时，默认情况下浏览器会尝试打开该文件。通过调用preventDefault()，我们可以阻止这种默认行为，让JavaScript能够处理拖拽的文件。

这段代码展示了HTML5拖拽API的基本用法，包括拖拽开始、放置和结束事件的处理，以及如何使用preventDefault()来控制浏览器行为。

标签：