计算机系统应用教程网站

网站首页 > 技术文章 正文

JavaScript 如何拖拽元素?

btikc 2024-09-06 18:13:57 技术文章 17 ℃ 0 评论

实例: 限制范围的拖拽

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
height: 400px;
margin: 50px auto;
border: 1px solid #f00;
/*让拖拽元素根据它进行定位*/
position: relative;
}
.move{
width: 200px;
height: 120px;
cursor: move;
background-color: orange;
/*定位属性*/
position: absolute;
left: 100px;
top: 50px;
}
</style>
</head>
<body>
<div class="box">
<div class="move"></div>
</div>

<script type="text/javascript">
    //获取box盒子
    var box = document.querySelector(".box");
    //获取拖拽的盒子
    var move = document.querySelector(".move");
    //求得box盒子距离body的净位置
    var boxLeft = box.getBoundingClientRect().left;
    var boxTop = box.getBoundingClientRect().top;
    //拖拽三大事件
    move.onmousedown = function(e){
    var ev = e || window.event;//事件对象兼容
    //存储鼠标按下时到事件源的位置
    var startX = ev.offsetX;
    var startY = ev.offsetY;


    document.onmousemove = function(e){
    var ev = e || window.event;//事件对象兼容
    //真实的拖拽元素的left和top值
    var left = ev.clientX -boxLeft - startX;
    var top = ev.clientY - boxTop - startY;
    //多拖拽盒子的left和top值进行约束
    if(left<0){
    left = 0;//left最小是0
    }else if(left>(box.offsetWidth-move.offsetWidth)){
    left = box.offsetWidth-move.offsetWidth;//left最大是大盒子宽度-小盒子宽度
    }
    if(top<0){
    top = 0;//top最小是0
    }else if(top>(box.offsetHeight-move.offsetHeight)){
    top = box.offsetHeight-move.offsetHeight;//top最大是大盒子高度-小盒子高度
    }


    //设置拖拽元素的left和top属性值
    move.style.left = left + "px"
    move.style.top = top + "px"
    }
    document.onmouseup = function(){
    document.onmousemove = null;
    document.onmouseup = null;
    }
    }
</script>
</body>
</html>

实例: 进一步优化(带吸附拖拽)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
height: 400px;
margin: 50px auto;
border: 1px solid #f00;
/*让拖拽元素根据它进行定位*/
position: relative;
}
.move{
width: 200px;
height: 120px;
cursor: move;
background-color: orange;
/*定位属性*/
position: absolute;
left: 100px;
top: 50px;
}
</style>
</head>
<body>
<div class="box">
<div class="move"></div>
</div>

<script type="text/javascript">
    //获取box盒子
    var box = document.querySelector(".box");
    //获取拖拽的盒子
    var move = document.querySelector(".move");
    //求得box盒子距离body的净位置
    var boxLeft = box.getBoundingClientRect().left;
    var boxTop = box.getBoundingClientRect().top;
    //拖拽三大事件
    move.onmousedown = function(e){
    var ev = e || window.event;//事件对象兼容
    //存储鼠标按下时到事件源的位置
    var startX = ev.offsetX;
    var startY = ev.offsetY;


    document.onmousemove = function(e){
    var ev = e || window.event;//事件对象兼容
    //真实的拖拽元素的left和top值
    var left = ev.clientX -boxLeft - startX;
    var top = ev.clientY - boxTop - startY;
    //弹性吸附 就是让他还差**px时我就让他到边边上
    if(left<20){
    left = 0;//left最小是0
    }else if(left>(box.offsetWidth-move.offsetWidth-20)){
    left = box.offsetWidth-move.offsetWidth;//left最大是大盒子宽度-小盒子宽度
    }
    if(top<20){
    top = 0;//top最小是0
    }else if(top>(box.offsetHeight-move.offsetHeight-20)){
    top = box.offsetHeight-move.offsetHeight;//top最大是大盒子高度-小盒子高度
    }


    //设置拖拽元素的left和top属性值
    move.style.left = left + "px"
    move.style.top = top + "px"
    }
    document.onmouseup = function(){
    document.onmousemove = null;
    document.onmouseup = null;
    }
    }
</script>
</body>
</html>

实例: 进一步优化(带影子拖拽)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
height: 400px;
margin: 50px auto;
border: 1px solid #f00;
/*让拖拽元素根据它进行定位*/
position: relative;
}
.move{
width: 200px;
height: 120px;
cursor: move;
background-color: orange;
/*定位属性*/
position: absolute;
left: 100px;
top: 50px;
}
.moveClone{
width: 200px;
height: 120px;
cursor: move;
background-color: orange;
/*定位属性*/
position: absolute;
left: 100px;
top: 50px;
opacity: 0.5;
display: none;
}
</style>
</head>
<body>
<div class="box">
<div class="move"></div>
<div class="moveClone"></div>
</div>

<script type="text/javascript">
//获取box盒子
var box = document.querySelector(".box");
//获取拖拽的盒子
var move = document.querySelector(".move");
//获取拖拽的盒子的影子
var moveClone = document.querySelector(".moveClone");
//求得box盒子距离body的净位置
var boxLeft = box.getBoundingClientRect().left;
var boxTop = box.getBoundingClientRect().top;
//声明两个变量用来存储真正的left和top值
var left_x,top_y;

//拖拽三大事件
move.onmousedown = function(e){
var ev = e || window.event;//事件对象兼容
//存储鼠标按下时到事件源的位置
var startX = ev.offsetX;
var startY = ev.offsetY;

//让那个拖拽盒子的影子显示出来
moveClone.style.display = "block";

document.onmousemove = function(e){
var ev = e || window.event;//事件对象兼容
//真实的拖拽元素的left和top值
left_x = ev.clientX -boxLeft - startX;
top_y = ev.clientY - boxTop - startY;
//弹性吸附 就是让他还差**px时我就让他到边边上
if(left_x<0){
left_x = 0;//left最小是0
}else if(left_x>(box.offsetWidth-move.offsetWidth)){
left_x = box.offsetWidth-move.offsetWidth;//left最大是大盒子宽度-小盒子宽度
}
if(top_y<0){
top_y = 0;//top最小是0
}else if(top_y>(box.offsetHeight-move.offsetHeight)){
top_y = box.offsetHeight-move.offsetHeight;//top最大是大盒子高度-小盒子高度
}


//设置拖拽元素的left和top属性值
moveClone.style.left = left_x + "px"
moveClone.style.top = top_y + "px"
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;

//让那个拖拽盒子的影子隐藏出来
moveClone.style.display = "none";


console.log(left_x)

//松手的时候吧真正的盒子移动过来
move.style.left = left_x + "px"
move.style.top = top_y + "px"
}

//清除默认行为
return false;
}
</script>
</body>
</html>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表