首页 > 其他分享 >Draggable 拖拽实例

Draggable 拖拽实例

时间：2024-04-09 14:23:02浏览次数：20  
标签：node container drop dataset Draggable 实例 background dropNode 拖拽 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>课程表拖拽</title>
		<style type="text/css">
			h1 {
				text-align: center;
			}

			.container {
				display: flex;
			}

			.left {
				background: #eee;
				height: 550px;
				width: 100px;
			}
			.left div{
				margin: 10px;
			}

			.item {
				text-align: center;
				color: white;
				cursor: pointer;
				width: 80px;
				height: 30px;
				line-height: 30px;
			}

			.right {
				background: #eee;
				width: calc(100% - 100px);
				margin-left: 20px;
				padding: 10px;
			}

			.color1 {
				background: #BA55D3;
			}

			.color2 {
				background: #BC8F8F;
			}

			.color3 {
				background: #B8860B;
			}

			.color4 {
				background: #B22222;
			}

			.color5 {
				background: #B0E0E6;
			}

			.color6 {
				background: #ADFF2F;
			}

			.color7 {
				background: #9932CC;
			}

			.color8 {
				background: #DB7093;
			}

			.color9 {
				background: #87CEFA;
			}
			
			.color10 {
				background: #32CD32;
			}
			
			.color11 {
				background: #0000CD;
			}

			table {
				text-align: center;
				border-collapse: collapse;
				margin: 0 auto;
				border: 1px solid #696969;
			}

			table tr th {
				border: 1px solid #696969;
				padding: 15px;
				background: #DCDCDC;
				font-weight: bold;
				color: #000;
			}

			table td {
				border: 1px solid #696969;
				width: 100px;
				height: 50px;
			}

			.ths {
				border-top: 1px solid #eee;
				border-left: 1px solid #eee;
				background: none;
			}

			.drop-over {
				background: #696969;
			}
		</style>
	</head>
	<body>
		<h1>课程表拖拽</h1>
		<div class="container">
			<div class="left" data-drop="move">
				<div draggable="true" data-effect="copy" class="color1 item">语文</div>
				<div draggable="true" data-effect="copy" class="color2 item">数学</div>
				<div draggable="true" data-effect="copy" class="color3 item">英语</div>
				<div draggable="true" data-effect="copy" class="color4 item">物理</div>
				<div draggable="true" data-effect="copy" class="color5 item">化学</div>
				<div draggable="true" data-effect="copy" class="color6 item">生物</div>
				<div draggable="true" data-effect="copy" class="color7 item">政治</div>
				<div draggable="true" data-effect="copy" class="color8 item">历史</div>
				<div draggable="true" data-effect="copy" class="color9 item">地理</div>
				<div draggable="true" data-effect="copy" class="color10 item">音乐</div>
				<div draggable="true" data-effect="copy" class="color11 item">体育</div>
			</div>
			<div class="right">
				<table border="1">
					<tr>
						<th class="ths"></th>
						<th>星期一</th>
						<th>星期二</th>
						<th>星期三</th>
						<th>星期四</th>
						<th>星期五</th>
						<th>星期六</th>
						<th>星期日</th>
					</tr>
					<tr  align="center" valign="middle">
						<td rowspan="4" style="background: #DCDCDC;">
							上
							<br>
							<br>
							午
						</td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
					</tr>
					<tr  align="center" valign="middle">
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
					</tr>
					<tr  align="center" valign="middle">
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
					</tr>
					<tr  align="center" valign="middle">
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
					</tr>
					<tr  align="center" valign="middle">
						<td style="border-left: 1px solid #eee;border-right: 1px solid #eee;" colspan="8">
							午休
						</td>
					</tr>
					<tr  align="center" valign="middle">
						<td rowspan="4" style="background: #DCDCDC;">
							下
							<br>
							<br>
							午
						</td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
					</tr>
					<tr  align="center" valign="middle">
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
					</tr>
					<tr  align="center" valign="middle">
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
					</tr>
					<tr  align="center" valign="middle">
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
					</tr>
				</table>
			</div>
		</div>
	</body>
	<script src="js/project.js"></script>
</html>

 

const container = document.querySelector(".container");

let source;
container.ondragstart = (e) => {
	e.dataTransfer.effectAllowed = e.target.dataset.effect;
	source = e.target;
}

function clearStyles() {
	document.querySelectorAll('.drop-over').forEach((node) => {
		node.classList.remove('drop-over');
	})
}

function getDropNode(node) {
	while (node) {
		if (node.dataset && node.dataset.drop) {
			return node;
		}
		node = node.parentNode;
	}
}


container.ondragover = (e) => {
	e.preventDefault();
	// console.log("over",e.target);
}

container.ondragenter = (e) => {
	clearStyles();
	const dropNode = getDropNode(e.target);
	if (!dropNode) {
		return;
	}
	if (source.dataset.effect === dropNode.dataset.drop) {
		dropNode.classList.add("drop-over");
	}
}

container.ondrop = (e) => {
	// console.log("drop",e.target);
	const dropNode = getDropNode(e.target);
	if (!dropNode) {
		return;
	}
	if (source.dataset.effect !== dropNode.dataset.drop) {
		return;
	}
	clearStyles();
	if (dropNode.dataset.drop === 'copy') {
		const cloned = source.cloneNode(true);
		cloned.dataset.effect = 'move';
		dropNode.innerHTML = '';
		dropNode.appendChild(cloned);
	} else {
		source.remove();
	}
}

　　

标签：node,container,drop,dataset,Draggable,实例,background,dropNode,拖拽
From： https://www.cnblogs.com/Jansens520/p/18123871

相关文章

  • Linux mformat命令教程：MS-DOS文件系统的磁盘格式化工具(附实例详解和注意事项)
    Linuxmformat命令介绍mformat是一个用于在低级格式化的磁盘上添加MS-DOS文件系统的命令。它可以在已经通过Unix低级格式化的磁盘上添加一个最小的MS-DOS文件系统（包括引导扇区、FAT和根目录）。Linuxmformat命令适用的Linux版本mformat命令在大多数Linux发行版中都可以使......
  • WPF —— 平移变换动画实例
    创建动画面临第一个问题选择正确的属性，选择属性的准则有以下几个方式进行选择 1如果希望动画显示和隐藏元素的时候，不要使用visibility，应使用opacity进行动画 2如果改变元素的位置的动画，尽量使用Canvas，使用Canvas.left以及canvas.top属性进行调整 但是也可以使用thickne......
  • Java 实例 – 如何编译 Java 文件||Java 实例 – 如何执行编译过 Java 文件
    Java实例–如何编译Java文件本文我们演示如何编译HelloWorld.java文件，其中Java代码如下：publicclassHelloWorld{publicstaticvoidmain(String[]args){System.out.println("HelloWorld");}}接下来我们使用javac命令来编译Java文件，并......
  • MySQL分组查询实例
    DDL——学生表，课程表CREATETABLE`student`(`id`int(11)NOTNULLAUTO_INCREMENTCOMMENT'学号',`createDate`datetimeDEFAULTNULL,`userName`varchar(20)DEFAULTNULL,`pwd`varchar(36)DEFAULTNULL,`phone`varchar(11)DEFAULTNULL,`age`......
  • echarts可拖拽折线图，拐点拖拽/点击定位/整体平移
    1.拐点拖拽,只有点击拐点才可以拖拽，并且限制了只能在当前X轴进行拖拽//chart myChart(){ constthat=this letsymbolSize=20; letdata=newArray(); letdataReal=newArray(); //this.real letlist=this.plan; letr......
  • MPLS——实验配置实例
    MPLS——实验发送端PE：VPN实例路由--->导入到VPNv4路由。接收端PE：VPNV4路由经过RT的过滤，导入到VPN实例中。IPV4单播路由——建立BGPIPv4单播邻居；VPNv4路由——建立BGPVPNv4邻居。[Huawei]displaybgpvpnv4allpeer//查看邻居的建立[AR3]displayiprouting-tablev......
  • MySQL分组查询实例2
    DDL——学生表——成绩表 CREATETABLE`class`(`id`int(11)NOTNULLAUTO_INCREMENT,`createdate`datetimeDEFAULTNULL,`username`varchar(255)DEFAULTNULL,`pwd`varchar(255)DEFAULTNULL,`phone`varchar(255)DEFAULTNULL,`age`int(3)......
  • 三种算法实例（二分查找算法、插入排序算法、贪心算法）
    当我们听到“算法”这个词时，很自然地会想到数学。然而实际上，许多算法并不涉及复杂数学，而是更多地依赖基本逻辑，这些逻辑在我们的日常生活中处处可见。在正式探讨算法之前，有一个有趣的事实值得分享：你已经在不知不觉中学会了许多算法，并习惯将它们应用到日常生活中了。下面我将举......
  • Timer定时器———创建定时器实例
    1.编写时间写入日志文件的脚本vimsystem.sh#!/bin/bashecho`date`>>/root/system.txtcatsystem.sh2.给脚本增加可执行权限chmod+xsystem.sh3.执行刚刚编写的脚本.system.sh4.查看日志文件，脚本执行成功catsystem.txt5.创建一个boot_backup.service文件，......
  • WPF —— 后台实现fromto动画实例
    标签页<ButtonWidth="100"Height="40"Content="点击开始动画"Click="Button_Click"Name="b1"></Button><!--HorizontalAlignment="Left"-->&l......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99