Jquery 简单拖拽功能

最新推荐文章于 2024-04-25 14:39:56 发布

切儿

最新推荐文章于 2024-04-25 14:39:56 发布

阅读量1.4k

点赞数

分类专栏： js web 文章标签：拖拽

本文链接：https://blog.csdn.net/kangmingyaner/article/details/79147585

版权

web 同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.ft {
				float: left;
				width: 50px;
				height: 50px;
				border: 1px solid red;
			}
			ul>li{
				cursor: move;
			}
		</style>
	</head>

	<body>
		<div style="float: left;width: 200px;">
			<ul>
				<li draggable="true">1111</li>
				<li draggable="true">2222</li>
				<li draggable="true">3333</li>
				<li draggable="true">4444</li>
				<li draggable="true">5555</li>
			</ul>
		</div>
		<div style="float: left;">
			<div>
				<div class="ft">

				</div>
				<div class="ft">

				</div>
				<div class="ft">

				</div>
				<div class="ft">

				</div>
			</div>
			<div>
				<div class="ft">

				</div>
				<div class="ft">

				</div>
				<div class="ft">

				</div>
				<div class="ft">

				</div>
			</div>
		</div>
		<script src="../lib/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			//被拖动的元素 要设置 draggable=true
			//1 ondragstart事件
			$('ul>li').each(function(index, item) {
				item.ondragstart = function(ev) {
					ev.dataTransfer.effectAllowed = "move";
					srcitem = item; //jquery对象
					//var isIE = browserServer.isIE();
					var isIE = false;
					debugger
					if(isIE) {
						ev.dataTransfer.setData("text", item.innerHTML); //ie必须用text或Text关键字
					} else {
						ev.dataTransfer.setData("adsf", item.innerHTML); //非ie必须不能用 text,否则拖动会产生新的窗口
					}
				};
			});
			$('.ft').each(function(index, item) {
				item.ondragover = function(ev) {
					/*拖拽元素在目标元素头上移动的时候*/
					ev.preventDefault();
				};
				item.ondragenter = function(ev) {
					ev.preventDefault();
				};
				item.ondrop = function(ev) {
					//var isie = browserServer.isIE();
					var isie = false;
					if(srcitem) {
						if(isie) {
							var movespan=ev.dataTransfer.getData("text");
						} else {
							var movespan=ev.dataTransfer.getData("adsf");
						}
						$(srcitem).remove();//将demo转为obj 并执行remove方法
						item.innerHTML = movespan;
					}
				};
			});
		</script>
	</body>

</html>