jQuery 實現DOM元素拖拽交換位置的實例代碼
實現步驟
1.html + bootstrap 布局畫3個面板。
注：面板樣式 position 屬性必須是絕對位置或者相對位置。
2.監聽面板的的 mousedown事件。
記錄當前對應面板的位置target_index，設置面板透明拖動。
3.監聽當前被拖動的面板的mousemove事件。
根據鼠標移動的位置和面板的相對位置計算出面板應該出現的新位置，就將面板位置設置為新位置。
4.監聽當前被拖動的面板的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 rel='external nofollow' rel='stylesheet'><link rel='stylesheet' type='text/css' href='http://www.piao2010.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.piao2010.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 代碼：
/** * 拖拽面板 到某個面板的位置，交換兩個面板位置 * 若沒有到任意一個面板位置，則被拖拽面板回原位置 */$(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-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});}});});});
總結
到此這篇關于jQuery 實現DOM元素拖拽交換位置的文章就介紹到這了,更多相關jquery 拖拽交換位置內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備