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 href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" 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元素和媒体查询 --> <!-- 注意： 如果通过 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 实现DOM元素拖拽交换位置的文章就介绍到这了,更多相关jquery 拖拽交换位置内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库！
-
本文向大家介绍jQuery实现html元素拖拽，包括了jQuery实现html元素拖拽的使用技巧和注意事项，需要的朋友参考一下 代码很简单，效果非常棒，直接给大家上源码： html css js 以上所述就是本文的全部内容了，希望大家能够喜欢。
-
本文向大家介绍python 实现交换两个列表元素的位置示例，包括了python 实现交换两个列表元素的位置示例的使用技巧和注意事项，需要的朋友参考一下 在IDLE 中验证如下： python是可以一次赋值两个变量的！谢谢！ 以上这篇python 实现交换两个列表元素的位置示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍JS实现图片拖拽交换效果，包括了JS实现图片拖拽交换效果的使用技巧和注意事项，需要的朋友参考一下 JS实现图片拖拽交换效果，供大家参考，具体内容如下 听 WEB前端javascript企业实战班 公开课，用JS实现了图片拖拽交换的目的；感谢老师的讲解。 实现要点 鼠标点击onmousedown：获取鼠标在页面上可视区域的位置(clientX, clientY)和元素外边框距已定位父元
-
本文向大家介绍vue全局自定义指令-元素拖拽的实现代码，包括了vue全局自定义指令-元素拖拽的实现代码的使用技巧和注意事项，需要的朋友参考一下 小白我用的是vue-cli的全家桶,在标签中加入v-drap则实现元素拖拽， 全局指令我是写在main.js中 后面肯定要补充放大缩小功能，和把定位，宽度信息保留到vuex中的state中 pS：下面看下面板拖拽之vue自定义指令，具体内容如下所述： 前
-
本文向大家介绍js实现鼠标拖拽缩放div实例代码，包括了js实现鼠标拖拽缩放div实例代码的使用技巧和注意事项，需要的朋友参考一下 封装为了jq插件，如下 drag.js html文件 以上所述是小编给大家介绍的js实现鼠标拖拽缩放div详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！
-
本文向大家介绍完美的js div拖拽实例代码，包括了完美的js div拖拽实例代码的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了完美的js div拖拽实例代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。