jQuery 實(shí)現(xiàn)DOM元素拖拽交換位置的實(shí)例代碼
實(shí)現(xiàn)步驟
1.html + bootstrap 布局畫(huà)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='http://www.baoyu77737.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://www.baoyu77737.com/js/exchange-position.js' type='text/javascript' charset='utf-8'></script><!-- HTML5 Shiv 和 Respond.js 用于讓 IE8 支持 HTML5元素和媒體查詢(xún) --><!-- 注意： 如果通過(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 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è)面板位置 * 若沒(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-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. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向2. 告別AJAX實(shí)現(xiàn)無(wú)刷新提交表單3. chat.asp聊天程序的編寫(xiě)方法4. 使用XSL將XML文檔中的CDATA注釋輸出為HTML文本5. 小技巧處理div內(nèi)容溢出6. 輕松學(xué)習(xí)XML教程7. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案8. PHP循環(huán)與分支知識(shí)點(diǎn)梳理9. XML入門(mén)的常見(jiàn)問(wèn)題(一)10. css進(jìn)階學(xué)習(xí) 選擇符
網(wǎng)公網(wǎng)安備