HTML5拖拽

雯靑爭

于 2021-12-31 15:39:57 发布

阅读量443

点赞数 2

文章标签： html5 前端 javascript

本文链接：https://blog.csdn.net/weixin_52421124/article/details/122256724

版权

拖拽

1.draggable属性:设置可以拖拽的控件值包括
1.true：可以拖拽
2.false：不可以拖拽
3.auto：浏览器判断
2.拖放事件
ondragstart：开始拖动时触发（被拖动对象）
ondrag：每当拖动元素被拖动时就会触发（被拖动对象）
ondragend：拖动时，鼠标松开会触发（被拖动对象）
ondragenter：被拖动元素进入本元素的范围内时触发（目标对象）
ondragover：当拖动元素拖动到本元素的范围内拖动时触发（当前目标对象）
ondragleave：被拖动元素离开本元素时触发（先前目标对象）
ondrop：每当拖动元素被放开时就会触发（当前目标对象）
3.dataTransfer对象的方法
1．getData(type,data)方法：返回指定格式的数据
2．setData (type)方法：设置（声明）指定格式数据
3．ClearData(type)方法 :删除指定格式数据
拖拽案例在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片拖拽</title>
<style>
	#d1{
			width:300px;
			height:300px;
			padding:10px;
			border:6px solid #fff; 
			position:absolute;
			top: 30px;
			left: 33px;
		}
	#d2{
			width:300px;
			height:300px;
			padding:10px;
			border:6px solid #fff;
			position:absolute; 
			margin-top:380px;
			margin-left:380px;
		}
	#d3{
			width:300px;
			height:300px;
			padding:10px;
			border:6px solid #fff;
			position:absolute; 
			margin-left:380px;
			top: 30px;
		}
	#d4{
			width:300px;
			height:300px;
			padding:10px;
			border:6px solid #fff;
			position:absolute; 
			margin-top:380px;
			left: 33px;
		}
	#d5{
		border: 1px solid #fff;
		background: #7671B9;
		width: 740px;
		height: 730px;
	}
</style>
<script>
	function tz(event){
		event.preventDefault();
	}

	function drag(event){
		event.dataTransfer.setData("Text",event.target.id);
	}

	function drop(event){
		event.preventDefault();
		var data = event.dataTransfer.getData("Text");
		event.target.appendChild(document.getElementById(data));
	}
</script>
</head>

<body>
<div id="d5">
    <div id="d1" ondrop="drop(event)" ondragover="tz(event)">
      <img src="1.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="300px" height="300px;" />
    </div>
    <div id="d2" ondrop="drop(event)" ondragover="tz(event)"></div>
    <div id="d3" ondrop="drop(event)" ondragover="tz(event)"></div>
    <div id="d4" ondrop="drop(event)" ondragover="tz(event)"></div>
</div>
</body>
</html>

雯靑爭

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML5拖拽

拖拽1.draggable属性:设置可以拖拽的控件值包括 1.true：可以拖拽 2.false：不可以拖拽 3.auto：浏览器判断2.拖放事件 ondragstart：开始拖动时触发（被拖动对象） ondrag：每当拖动元素被拖动时就会触发（被拖动对象） ondragend：拖动时，鼠标松开会触发（被拖动对象） ondragenter：被拖动元素进入本元素的范围内时触发（目标对象） ondragover：当拖动元素拖动到本元素的范围内拖动时触发（当前目标对
复制链接

扫一扫