jQuery 實現(xiàn)DOM元素拖拽交換位置的實例代碼

更新時間：2020年07月14日 10:41:40 作者：聽卉

這篇文章主要介紹了jQuery 實現(xiàn)DOM元素拖拽交換位置，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

實現(xiàn)步驟

1.html + bootstrap 布局畫3個面板。

注：面板樣式 position 屬性必須是絕對位置或者相對位置。

2.監(jiān)聽面板的的 mousedown事件。

記錄當(dāng)前對應(yīng)面板的位置target_index，設(shè)置面板透明拖動。

3.監(jiān)聽當(dāng)前被拖動的面板的mousemove事件。

根據(jù)鼠標(biāo)移動的位置和面板的相對位置計算出面板應(yīng)該出現(xiàn)的新位置，就將面板位置設(shè)置為新位置。

4.監(jiān)聽當(dāng)前被拖動的面板的mouseup事件。

當(dāng)松開鼠標(biāo)時，查看當(dāng)前鼠標(biāo)所在位置對應(yīng)的面板的位置exchange_index。對比兩個位置，若不一樣，說明需要交換這兩個位置對應(yīng)的面板內(nèi)容，否則直接使被拖動面板回原位即可。

源碼

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  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.監(jiān)聽 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);				//設(shè)置優(yōu)先展示
		
		//2.監(jiān)聽當(dāng)前被拖拽的面板的移動事件：鼠標(biāo)移動到何處，相應(yīng)面板的css控制顯示到何處
		$(this).mousemove(function(e){
			var x = e.pageX - targetX;				//移動時根據(jù)鼠標(biāo)位置計算面板元素左上角的相對位置
			var y = e.pageY - targetY;
			$(this).css({top:y,left:x});			//設(shè)置面板元素新位置
		}).mouseup(function(e){
			//3.監(jiān)聽鼠標(biāo)松開事件：交換面板元素，并將父級data-index換為原來的值
			$(this).fadeTo("fast", 1);				//停止移動并恢復(fù)成不透明
			$(this).css("z-index",0);				//展示優(yōu)先級降低
			//鼠標(biāo)松開對應(yīng)的面板元素的父div對應(yīng)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});
			}
		});
	});
});

總結(jié)

到此這篇關(guān)于jQuery 實現(xiàn)DOM元素拖拽交換位置的文章就介紹到這了,更多相關(guān)jquery 拖拽交換位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: