HTML5拖拽事件

最新推荐文章于 2024-04-28 15:52:12 发布

Mrzhuang007

最新推荐文章于 2024-04-28 15:52:12 发布

阅读量768

点赞数

分类专栏：前端HTML/CSS/JS

本文链接：https://blog.csdn.net/qq_17190121/article/details/98884514

版权

前端HTML/CSS/JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

任务

拖动网页下方图片到指定地方

js代码

主要代码在ondrop函数中，通过appendChild将图片从一个地方移动到另一个地方
采用document.getElementById(id)**.clone()**不会消除原有图片

function onload()
{
	var set = document.getElementsByName("set");
	var img = document.getElementsByName("img");
	
	for(var i=0;i<img.length;i++)
	{
		img[i].ondragstart=function(e){
			//kaishi
			e.dataTransfer.setData("data",e.target.id);
		}
		img[i].ondrag=function(e){
			//yidong
			e.preventDefault();
		}
		img[i].ondragend=function(e){
			//wancheng
			e.preventDefault();
		}
	}
	
	for(var i=0;i<set.length;i++)
	{
		set[i].ondragenter=function(e){
			e.preventDefault();
		}
		set[i].ondragover=function  (e) {
			//one.innerHTML+="移动";
			e.preventDefault();
		}
		set[i].ondragleave=function  (e) {
			e.preventDefault();
		}

		set[i].ondrop=function  (e) {
			//e.preventDefault();
			//set[j].appendChild(img[j]);
			//console.log(e.target);
			//获取到放在哪个set中
			var realId = e.target.id.toString();
			if(e.target.tapName!="DIV"){
				realId=document.getElementById(realId).parentNode.id;
			}
			var newSet =document.getElementById(realId);
			console.log(newSet);
			//拖拽的是哪个数据
			var id = e.dataTransfer.getData("data");
			var newElem =document.getElementById(id);
			//添加进对应set中
			newSet.appendChild(newElem);
			//newElem.draggable=false;
			
			//e.preventDefault();
		}
	}
	
}

html代码

设置标签的draggable属性为true
属性name作用为方便js中添加拖拽事件，也可以统一用onclick事件代替

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/mainUI.css" />
		<script src="js/drag.js"></script>
	</head>
	<body onload="onload()">
		<table cellpadding="10" class="imgUp">
			<tr height="10px" align="center">
				<td>顾客A</td>
				<td>顾客B</td>
				<td>顾客C</td>
			</tr>
			<tr>
				<td width="250px"><div style="border-style: solid; border-color: red; height: 100%;" name="set" id="set1">
						<p id="pat1" style="height: 10px;">放置区</p>
				</div></td>
				<td width="250px"><div style="border-style: solid; border-color: red;height: 100%;" name="set" id="set2">
						<p id="pat2" style="height: 10px;">放置区</p>
				</div></td>
				<td width="250px"><div style="border-style: solid; border-color: red;height: 100%;" name="set" id="set3">
						<p id="pat3" style="height: 10px;">放置区</p>
				</div></td>
			</tr>
		</table>
		
		<table border="0" class="image">
			<tr>
				<td colspan="3" align="center">请选择一下菜品</td>
			</tr>
			<tr>
				<td><img src="img/dl1d.jpg" name="img" id="img1" draggable="true"/></td>
				<td><img src="img/dl2d.jpg" name="img" id="img2" ddraggable="true"/></td>
				<td><img src="img/dl3d.jpg" name="img" id="img3" ddraggable="true"/></td>
			</tr>
			<tr>
				<td><img src="img/js1.jpg" name="img" id="img4" ddraggable="true"/></td>
				<td><img src="img/js2.jpg" name="img" id="img5" ddraggable="true"/></td>
				<td><img src="img/js3.jpg" name="img" id="img6" ddraggable="true"/></td>
			</tr>
		</table>
	</body>
</html>

Mrzhuang007

关注

0
点赞
踩
0

收藏

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

任务拖动网页下方图片到指定地方js代码主要代码在ondrop函数中，通过appendChild将图片从一个地方移动到另一个地方采用document.getElementById(id)**.clone()**不会消除原有图片function onload(){ var set = document.getElementsByName("set"); var img = ...
复制链接

扫一扫