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 校验中国身份证号码实例详解
Apr 11 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 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 CKEditor 上传图片实现代码
2009/11/06 PHP
用 JSON 处理缓存
2007/04/27 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
python进阶教程之词典、字典、dict
2014/08/29 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
Python如何进行时间处理
2020/08/06 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
公司企业表扬信
2014/01/11 职场文书
护士自我介绍信
2014/01/13 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
网站美工岗位职责
2014/04/02 职场文书
父亲节活动策划方案
2014/08/24 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
奖学金个人总结
2015/03/04 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技
CSS的calc函数用法小结
2022/06/25 HTML / CSS