jQuery 實(shí)現(xiàn)DOM元素拖拽交換位置的實(shí)例代碼
實(shí)現(xiàn)步驟
1.html + bootstrap 布局畫3個(gè)面板。
注：面板樣式 position 屬性必須是絕對(duì)位置或者相對(duì)位置。
2.監(jiān)聽面板的的 mousedown事件。
記錄當(dāng)前對(duì)應(yīng)面板的位置target_index，設(shè)置面板透明拖動(dòng)。
3.監(jiān)聽當(dāng)前被拖動(dòng)的面板的mousemove事件。
根據(jù)鼠標(biāo)移動(dòng)的位置和面板的相對(duì)位置計(jì)算出面板應(yīng)該出現(xiàn)的新位置，就將面板位置設(shè)置為新位置。
4.監(jiān)聽當(dāng)前被拖動(dòng)的面板的mouseup事件。
當(dāng)松開鼠標(biāo)時(shí)，查看當(dāng)前鼠標(biāo)所在位置對(duì)應(yīng)的面板的位置exchange_index。對(duì)比兩個(gè)位置，若不一樣，說明需要交換這兩個(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='http://m.b3g6.com/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='http://m.b3g6.com/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 style='padding-top: 20px;'><div id='panelsBox'><div 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 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 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è)面板位置 * 若沒有到任意一個(gè)面板位置，則被拖拽面板回原位置 */$(function(){//1.監(jiān)聽 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)擊后開始拖動(dòng)并透明$(this).css('z-index',100);//設(shè)置優(yōu)先展示//2.監(jiān)聽當(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)聽鼠標(biāo)松開事件：交換面板元素，并將父級(jí)data-index換為原來的值$(this).fadeTo('fast', 1);//停止移動(dòng)并恢復(fù)成不透明$(this).css('z-index',0);//展示優(yōu)先級(jí)降低//鼠標(biāo)松開對(duì)應(yīng)的面板元素的父div對(duì)應(yīng)data-indexvar 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)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. JS中6個(gè)對(duì)象數(shù)組去重的方法2. 一文帶你徹底理解Java序列化和反序列化3. python中文本字符處理的簡(jiǎn)單方法記錄4. 資深程序員：給Python軟件開發(fā)測(cè)試的25個(gè)忠告！5. Python使用Selenium自動(dòng)進(jìn)行百度搜索的實(shí)現(xiàn)6. PHP laravel實(shí)現(xiàn)導(dǎo)出PDF功能7. Java commons-httpclient如果實(shí)現(xiàn)get及post請(qǐng)求8. vscode運(yùn)行php報(bào)錯(cuò)php?not?found解決辦法9. Python基于requests庫爬取網(wǎng)站信息10. PHP利用curl發(fā)送HTTP請(qǐng)求的實(shí)例代碼
網(wǎng)公網(wǎng)安備