html draggable 属性

最新推荐文章于 2025-06-06 14:15:17 发布

Chengdu.S

最新推荐文章于 2025-06-06 14:15:17 发布

阅读量927

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html

本文链接：https://blog.youkuaiyun.com/modelmd/article/details/98356211

前端专栏收录该内容

3 篇文章

订阅专栏

html draggable 属性

html 默认中拖动的元素有 , 如果其它元素需要拖动，需要设置 draggable 属性为 true

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素 拖动 drag</title>
</head>
<body>
<p id="textp" draggable="true">你好</p>
<script type="text/javascript">
	var textp = document.getElementById("textp");
	var icon = document.createElement("img");
	icon.src = 'icon.jpg';
	textp.ondragstart = function(event) {
		var dataTransfer = event.dataTransfer;
		dataTransfer.effectAllowed = "copy";
		// 设置拖放显示图标
		dataTransfer.setDragImage(icon, 0, 0);
	
	}
	document.ondragover = function(evetnt) {
		console.log(event);
		return false;
	}
	document.ondrop = function(event) {
		console.log(event);
		textp.style.position = "absolute";
		textp.style.left = event.pageX + "px";
		textp.style.top = event.pageY + "px";
		return false;
	}
</script>
</body>
</html>