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 06 jQuery
JQuery实现图片轮播效果
May 08 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 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若干单维数组遍历方法的比较
2011/09/20 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
PHP加密解密函数详解
2015/10/28 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
Python Gitlab Api 使用方法
2019/08/28 Python
Python如何实现强制数据类型转换
2019/11/22 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
Python中bisect的使用方法
2019/12/31 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
会计自我鉴定
2014/02/04 职场文书
上课玩手机检讨书
2014/02/08 职场文书
影子教师研修方案
2014/06/14 职场文书
运动会演讲稿200字
2014/08/25 职场文书
转学证明范本
2015/06/19 职场文书
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers