jQuery 實(shí)現(xiàn)DOM元素拖拽交換位置的實(shí)例代碼
更新時(shí)間：2020年07月14日 10:41:40 作者：聽(tīng)卉
這篇文章主要介紹了jQuery 實(shí)現(xiàn)DOM元素拖拽交換位置，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
實(shí)現(xiàn)步驟
1.html + bootstrap 布局畫3個(gè)面板。
注：面板樣式 position 屬性必須是絕對(duì)位置或者相對(duì)位置。
2.監(jiān)聽(tīng)面板的的 mousedown事件。
記錄當(dāng)前對(duì)應(yīng)面板的位置target_index，設(shè)置面板透明拖動(dòng)。
3.監(jiān)聽(tīng)當(dāng)前被拖動(dòng)的面板的mousemove事件。
根據(jù)鼠標(biāo)移動(dòng)的位置和面板的相對(duì)位置計(jì)算出面板應(yīng)該出現(xiàn)的新位置，就將面板位置設(shè)置為新位置。
4.監(jiān)聽(tīng)當(dāng)前被拖動(dòng)的面板的mouseup事件。
當(dāng)松開(kāi)鼠標(biāo)時(shí)，查看當(dāng)前鼠標(biāo)所在位置對(duì)應(yīng)的面板的位置exchange_index。對(duì)比兩個(gè)位置，若不一樣，說(shuō)明需要交換這兩個(gè)位置對(duì)應(yīng)的面板內(nèi)容，否則直接使被拖動(dòng)面板回原位即可。
源碼
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元素和媒體查詢 --> <!-- 注意： 如果通過(guò) file:// 引入 Respond.js 文件，則該文件無(wú)法起效果 --> <!--[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 代碼：
/**
* 拖拽面板 到某個(gè)面板的位置，交換兩個(gè)面板位置
* 若沒(méi)有到任意一個(gè)面板位置，則被拖拽面板回原位置
*/
$(function(){
//1.監(jiān)聽(tīng) mousedown 事件
$("#panelsBox").on('mousedown','.panel',function(e){
var target_index = $(this).parent().attr("data-index"); //被拖動(dòng)面板元素位置
var targetX = e.pageX - parseInt($(this).css("left"));
var targetY = e.pageY - parseInt($(this).css("top"));
$(this).fadeTo(20, 0.5); //點(diǎn)擊后開(kāi)始拖動(dòng)并透明
$(this).css("z-index",100); //設(shè)置優(yōu)先展示
//2.監(jiān)聽(tīng)當(dāng)前被拖拽的面板的移動(dòng)事件：鼠標(biāo)移動(dòng)到何處，相應(yīng)面板的css控制顯示到何處
$(this).mousemove(function(e){
var x = e.pageX - targetX; //移動(dòng)時(shí)根據(jù)鼠標(biāo)位置計(jì)算面板元素左上角的相對(duì)位置
var y = e.pageY - targetY;
$(this).css({top:y,left:x}); //設(shè)置面板元素新位置
}).mouseup(function(e){
//3.監(jiān)聽(tīng)鼠標(biāo)松開(kāi)事件：交換面板元素，并將父級(jí)data-index換為原來(lái)的值
$(this).fadeTo("fast", 1); //停止移動(dòng)并恢復(fù)成不透明
$(this).css("z-index",0); //展示優(yōu)先級(jí)降低
//鼠標(biāo)松開(kāi)對(duì)應(yīng)的面板元素的父div對(duì)應(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 實(shí)現(xiàn)DOM元素拖拽交換位置的文章就介紹到這了,更多相關(guān)jquery 拖拽交換位置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解析jquery easyui tree異步加載子節(jié)點(diǎn)問(wèn)題
本篇文章主要介紹解析jquery easyui tree異步加載子節(jié)點(diǎn)問(wèn)題，easyui中的樹(shù)可以從標(biāo)記中建立，也可以通過(guò)指定一個(gè)URL屬性讀取數(shù)據(jù)建立，有興趣的可以了解一下。2017-03-03
jQuery 劇場(chǎng)版 你必須知道的javascript
從零開(kāi)始學(xué)習(xí)jQuery(劇場(chǎng)版) 你必須知道的javascript2009-05-05
上篇文章我們介紹了使用原生的javascript實(shí)現(xiàn)了圖片瀑布流效果，本文我們來(lái)用jQuery來(lái)實(shí)現(xiàn)同樣的效果。2014-12-12
基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶名唯一性實(shí)例代碼
本文分為jsp代碼和后臺(tái)代碼給大家介紹了基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶名唯一性，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-06-06
這篇文章主要介紹了jQuery中dequeue()方法用法,實(shí)例分析了dequeue()方法的功能、定義、使用技巧與相關(guān)注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
獲取div中文本的長(zhǎng)度，然后和通過(guò)和屬性limit規(guī)定的長(zhǎng)度進(jìn)行對(duì)比，如果超出長(zhǎng)度則使用截取指定的長(zhǎng)度，后面用...替代2014-08-08
jquery自定義插件開(kāi)發(fā)之window的實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了jquery自定義插件開(kāi)發(fā)之window的實(shí)現(xiàn)過(guò)程的相關(guān)資料,需要的朋友可以參考下2016-05-05
jQuery實(shí)現(xiàn)動(dòng)態(tài)控制頁(yè)面元素的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)控制頁(yè)面元素的方法,結(jié)合實(shí)例形式分析了jQuery事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-12-12
jQuery實(shí)現(xiàn)節(jié)點(diǎn)的追加、替換、刪除、復(fù)制功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)節(jié)點(diǎn)的追加、替換、刪除、復(fù)制功能,結(jié)合具體實(shí)例形式分析了jQuery針對(duì)DOM節(jié)點(diǎn)的操作技巧,涉及append()、prepend()、replaceAll()、replaceWith()empty()、remove()、clone()、clone()等方法的使用技巧,需要的朋友可以參考下2017-07-07
從零開(kāi)始學(xué)習(xí)jQuery (二) 萬(wàn)能的選擇器
本章講解jQuery最重要的選擇器部分的知識(shí). 有了jQuery的選擇器我們幾乎可以獲取頁(yè)面上任意的一個(gè)或一組對(duì)象, 可以明顯減輕開(kāi)發(fā)人員的工作量.2010-10-10