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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 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
用PHP4访问Oracle815
2006/10/09 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
PHP中header用法小结
2016/05/23 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
Python实现随机选择元素功能
2017/09/14 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Python实现代码块儿折叠
2020/04/15 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
关于对大人不礼貌的检讨书
2014/09/29 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
中层干部考核评语
2015/01/04 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
三十年同学聚会感言
2015/07/30 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python