杰晶网络

jQuery 实现DOM元素拖拽交换位置的实例代码
网络编程 2024/5/5 佚名
3 2

实现步骤

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="/UploadFiles/2021-04-02/jquery.min.js">


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,拖拽交换位置,js,dom,元素拖拽
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接