draggable 拖拽把一个标签拖到另一个框

最新推荐文章于 2023-06-20 15:07:02 发布

暖光_&

最新推荐文章于 2023-06-20 15:07:02 发布

阅读量1.7k

点赞数

分类专栏： js 文章标签：拖拽只能拖进去一个

本文链接：https://blog.csdn.net/qq_40971483/article/details/95758995

版权

js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

拖拽的时候把一个标签拖动到另一个框，且这个框里已经有元素的话，不可再拖进去。

实现原理就是自定义属性，每次拖完去重置属性，标签有属性的不可再拖进去

支持i9及i9+

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.fl{float: left;}
			ul li,ul.a {
			line-height: 30px;
			display: block;
			text-align: left;
			width: 200px;
			cursor: pointer;
			border: 1px solid #ccc;
			margin-top: 15px;
			height: 30px;
			background: #F0EFEF;
			border-radius: 5px;
		}
		
		</style>
	</head>
	<body>
		<ul class="fl" ondrop="drop(event)" ondragover="allowDrop(event)" id="teamName">
			<li ondrop="drop(event)" ondragover="allowDrop(event)" >
				<span id="0left2"  draggable="true" ondragstart="drag(event)" >7845454521</span>
			</li>
			<li ondrop="drop(event)" ondragover="allowDrop(event)" >
				<span id="0left3"  draggable="true" ondragstart="drag(event)" >121231212</span>
			</li>
		</ul>
		<div class="clum clearfix fl">
			<ul class="a" ondrop="drop(event)" ondragover="allowDrop(event)" data-drop-done="1">
				
			</ul>
			<ul class="a" ondrop="drop(event)" ondragover="allowDrop(event)" data-drop-done="1">
				
			</ul>
		</div>
	</body>
</html>
<script src="jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	//清除浏览器默认事件
	function allowDrop(ev) {
		ev.preventDefault();
	}
	//把可拖动元素set
	function drag(ev) {
		ev.dataTransfer.setData("Text", ev.target.id);
	}
	//有元素不能再拖进去
	function drop(ev) {
		if (ev.target.getAttribute('data-drop-done') == "1") {
			var data = ev.dataTransfer.getData("Text");
	
			ev.target.appendChild(document.getElementById(data));
	
			ev.target.setAttribute('data-drop-done', "");
			setAttr();
		}
	}
	
	// 重置可拖入的属性
	function setAttr() {
		$.each($('.clum ul'), function(i, val) {
			var hasChild = $(this).children().length>0 ? true : false;
			if (!hasChild) {
				$(this).attr('data-drop-done', 1);
			};
		})
		$.each($('#teamName  li'), function(i, val) {
			
			var hasChild = $(this).children().length>0 ? true : false;
			
			if (!hasChild) {
				$(this).attr('data-drop-done', 1);
			};
		})
	}
</script>

暖光_&

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
draggable 拖拽把一个标签拖到另一个框

拖拽的时候把一个标签拖动到另一个框，且这个框里已经有元素的话，不可再拖进去。实现原理就是自定义属性，每次拖完去重置属性，标签有属性的不可再拖进去支持i9及i9+<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> ...
复制链接

扫一扫