實現步驟
html + bootstrap布局畫3個面板。
注：面板樣式 position 屬性必須是絕對位置或者相對位置。
監聽面板的的 mousedown事件。
記錄當前對應面板的位置target_index，設置面板透明拖動。
監聽當前被拖動的面板的mousemove事件。
根據鼠標移動的位置和面板的相對位置計算出面板應該出現的新位置，就將面板位置設置為新位置。
監聽當前被拖動的面板的mouseup事件。
當松開鼠標時，查看當前鼠標所在位置對應的面板的位置exchange_index。對比兩個位置，若不一樣，說明需要交換這兩個位置對應的面板內容，否則直接使被拖動面板回原位即可。
秒收目錄站https://www.tomove.com.cn
源碼
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/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" >"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" >"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" >"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(">//被拖動面板元素位置 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[hljs-string">"]").empty().append(exchangeElem[0]); $("#panelsBox").children("div[hljs-string">"]").empty().append(this); $("#panelsBox").children("div[hljs-string">"]").children(".panel").css({'top':"0px",'left':"0px",'z-index':0}); //交換data-index $("#deviceList").children("div[hljs-string">"]") 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}); } }); }); });