jQuery 實現DOM元素拖拽交換位置
阿新 • • 發佈：2020-07-14
實現步驟
-
html+bootstrap佈局畫3個面板。注：面板樣式
position屬性必須是絕對位置或者相對位置。 -
監聽面板的的
mousedown事件。記錄當前對應面板的位置
target_index，設定面板透明拖動。 -
監聽當前被拖動的面板的
mousemove事件。根據滑鼠移動的位置和麵板的相對位置計算出面板應該出現的新位置，就將面板位置設定為新位置。
-
監聽當前被拖動的面板的
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="stylesheet"> <link rel="stylesheet" type="text/css" href="../css/exchange-position.css"/> <!-- Jquery 3.5 --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/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}); } }); }); });