jQuery 实现DOM元素拖拽交换位置的实例代码


Posted in jQuery onJuly 14, 2020

实现步骤

1.html + bootstrap 布局画3个面板。

注:面板样式 position 属性必须是绝对位置或者相对位置。

2.监听面板的的 mousedown事件。

记录当前对应面板的位置target_index,设置面板透明拖动。

3.监听当前被拖动的面板的mousemove事件。

根据鼠标移动的位置和面板的相对位置计算出面板应该出现的新位置,就将面板位置设置为新位置。

4.监听当前被拖动的面板的mouseup事件。

当松开鼠标时,查看当前鼠标所在位置对应的面板的位置exchange_index。对比两个位置,若不一样,说明需要交换这两个位置对应的面板内容,否则直接使被拖动面板回原位即可。

源码

html 代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery 拖拽交换元素的位置</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- 引入 Bootstrap -->
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../css/exchange-position.css" rel="external nofollow" />
	<!-- Jquery 3.5 -->
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
	<script src="../js/exchange-position.js" type="text/javascript" charset="utf-8"></script>
	<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
	<!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->
	
</head>
<body>
	<div class="container" style="padding-top: 20px;">
		<div class="row" id="panelsBox">
			<div class="col-md-4 column" data-index="1">
				<div class="panel panel-success">
					<div class="panel-heading">
						<h3 class="panel-title">
							Panel title
						</h3>
					</div>
					<div class="panel-body">
						Panel content
					</div>
					<div class="panel-footer">
						Panel footer
					</div>
				</div>
			</div>
			<div class="col-md-4 column" data-index="2">
				<div class="panel panel-info">
					<div class="panel-heading">
						<h3 class="panel-title">
							Panel title
						</h3>
					</div>
					<div class="panel-body">
						Panel content
					</div>
					<div class="panel-footer">
						Panel footer
					</div>
				</div>
			</div>
			<div class="col-md-4 column" data-index="3">
				<div class="panel panel-danger">
					<div class="panel-heading">
						<h3 class="panel-title">
							Panel title
						</h3>
					</div>
					<div class="panel-body">
						Panel content
					</div>
					<div class="panel-footer">
						Panel footer
					</div>
				</div>
			</div>
		</div>
		
	</div>
</body>
</html>

css 代码:

#panelsBox>div>.panel{
	position: relative;
}

js 代码:

/**
 * 拖拽面板 到某个面板的位置,交换两个面板位置
 * 若没有到任意一个面板位置,则被拖拽面板回原位置
 */
$(function(){
	//1.监听 mousedown 事件
	$("#panelsBox").on('mousedown','.panel',function(e){
		var target_index = $(this).parent().attr("data-index");		//被拖动面板元素位置
		var targetX = e.pageX - parseInt($(this).css("left"));
		var targetY = e.pageY - parseInt($(this).css("top"));
		$(this).fadeTo(20, 0.5);				//点击后开始拖动并透明
		$(this).css("z-index",100);				//设置优先展示
		
		//2.监听当前被拖拽的面板的移动事件:鼠标移动到何处,相应面板的css控制显示到何处
		$(this).mousemove(function(e){
			var x = e.pageX - targetX;				//移动时根据鼠标位置计算面板元素左上角的相对位置
			var y = e.pageY - targetY;
			$(this).css({top:y,left:x});			//设置面板元素新位置
		}).mouseup(function(e){
			//3.监听鼠标松开事件:交换面板元素,并将父级data-index换为原来的值
			$(this).fadeTo("fast", 1);				//停止移动并恢复成不透明
			$(this).css("z-index",0);				//展示优先级降低
			//鼠标松开对应的面板元素的父div对应data-index
			var exchangeElem = $(document.elementFromPoint(e.pageX,e.pageY)).parents(".panel");
			
			if(exchangeElem.length > 0){
				var exchange_index = $(exchangeElem[0]).parent("div").attr("data-index");
				var device_id_target = $(exchangeElem[0]).parent("div").attr("data-device-id");
				device_id_target = device_id_target == undefined?"":device_id_target;
				if(target_index != exchange_index){
					//交换面板元素
					$("#panelsBox").children("div[data-index=" + target_index + "]").empty().append(exchangeElem[0]);
					$("#panelsBox").children("div[data-index=" + exchange_index + "]").empty().append(this);
					$("#panelsBox").children("div[data-index=" + exchange_index + "]").children(".panel").css({'top':"0px",'left':"0px",'z-index':0});
					//交换data-index
					$("#deviceList").children("div[data-index=" + target_index + "]")
						attr("data-index",exchange_index);
					$(document.elementFromPoint(e.pageX,e.pageY)).parents(".panel").parent()
						.attr("data-index",target_index);
				}else{
					//返回原位置
					$(this).css({'top':"0px",'left':"0px",'z-index':0});
				}
				
			}else{
				//返回原位置
				$(this).css({'top':"0px",'left':"0px",'z-index':0});
			}
		});
	});
});

总结

到此这篇关于jQuery 实现DOM元素拖拽交换位置的文章就介绍到这了,更多相关jquery 拖拽交换位置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

jQuery 相关文章推荐
最常用的jQuery表单验证(简单)
May 23 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 #jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 #jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 #jQuery
jQuery 实现扁平式小清新导航
Jul 07 #jQuery
jQuery 动态粒子效果示例代码
Jul 07 #jQuery
jQuery实现简单飞机大战
Jul 05 #jQuery
jQuery实现简单日历效果
Jul 05 #jQuery
You might like
php自动适应范围的分页代码
2008/08/05 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
php集成动态口令认证
2016/07/21 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
Javascript开发包大全整理
2006/12/22 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
python中的lambda表达式用法详解
2016/06/22 Python
python实现聚类算法原理
2018/02/12 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
Python异常处理操作实例详解
2018/08/28 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
python调用摄像头拍摄数据集
2019/06/01 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
如何手工释放资源
2013/12/15 面试题
电子商务专业学生的自我鉴定
2013/11/28 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
师德师风演讲稿
2014/05/05 职场文书
超市开店计划书
2014/09/15 职场文书
债务授权委托书范本
2014/10/17 职场文书
监察建议书
2015/02/04 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
话题作文之自信作文
2019/11/15 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL