实现步骤
源码
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" 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 代码：
/** * 拖拽面板 到某个面板的位置，交换两个面板位置 * 若没有到任意一个面板位置，则被拖拽面板回原位置 */ $(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-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}); } }); }); }); —-想了解更多的jQuery特效教程关注<计算机技术网(www.ctvol.com)!!>
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/jquerytutorial/124296.html