html + bootstrap布局画3个面板。
注:面板样式 position 属性必须是绝对位置或者相对位置。
监听面板的的 mousedown事件。
记录当前对应面板的位置target_index,设置面板透明拖动。
监听当前被拖动的面板的mousemove事件。
根据鼠标移动的位置和面板的相对位置计算出面板应该出现的新位置,就将面板位置设置为新位置。
监听当前被拖动的面板的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="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" >"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" >"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" >"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(">//被拖动面板元素位置
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[hljs-string">"]").empty().append(exchangeElem[0]);
$("#panelsBox").children("div[hljs-string">"]").empty().append(this);
$("#panelsBox").children("div[hljs-string">"]").children(".panel").css({'top':"0px",'left':"0px",'z-index':0});
//交换data-index
$("#deviceList").children("div[hljs-string">"]")
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});
}
});
});
});
我们经常碰到的需求是希望页面某个元素固定在浏览器的一个位置,无论如何滚动滚动条,位置不变,就例如经常看到的弹出广告。方法一般是使用js控制,或者使用css。这里我写的是css的控制方法。在IE7以上版本及firefox、opera、safari里
JS 有3种书写位置,分别为行内、内嵌和外部。可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick,注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
在前端项目开发中,页面的滚动条是经常出现的,那么js如何获取滚动条位置呢?pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。
当内部内容大于外部元素高度时,写入overflow:auto,就会产生滚动条,在所溢出去的就是滚动条;获取元素范围矩形 其中包括距离视口的距离,已经元素的宽高,还有left,top,bottom,right
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!