老师需要帮忙
来源：4-18 事件对象（2）
weixin_慕移动6442865
2020-11-03 22:16:15
老师能出一个讲解一下关于鼠标来拖动元素的视频吗？这里我是模仿百度找的，这里有个问题，当有滚动条时怎么样才能在拖动元素时可以同时滚动滚动条？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin:0;padding:0;}
body{
height: 2000px;
}
#box{
width: 100px;
height: 100px;
background-color: chartreuse;
position: absolute;
}
#text{
font-size: 20px;
}
</style>
</head>
<body>
<div id='box'>
</div>
<div id='text'>
</div>
</body>
<script>
var box=document.getElementById('box');
var text=document.getElementById('text');
// box.addEventListener('mousemove',function(e){
// text.innerHTML='offsetXY'+':'+e.offsetX+','+e.offsetY+'<br>'+
// 'pageXY'+e.pageX+','+e.pageY+'<br>'+
// 'clientXY'+e.clientX+','+e.clientY
// })
var x,y
var a=false;
var e
box.onmousedown=function(e){
e=e||window.event
a=true;
y=e.clientY-box.offsetTop
x=e.clientX-box.offsetLeft
console.log(a)
}
document.onmousemove=function(e){
if(a){
var t=e.clientY-y
var l=e.clientX-x
var maxl=document.documentElement.offsetWidth-box.offsetWidth;
var maxt=document.documentElement.offsetHeight-box.offsetHeight;
if(t<0){
t=0
}else if(t>maxt){
t=maxt;
}
if(l<0){
l=0
}else if(l>maxl){
l=maxl;
}
box.style.top=t+'px'
box.style.left=l+'px'
}
}
document.onmouseup=function(){
a=false;
console.log(a)
}
</script>
</html>
写回答
1回答
-
同学你好，问题解答如下：
后面移动端的课程中，会讲解单指拖动，里面包含拖动的案例。移动端与pc端拖动的实现思路是一样的，同学可以参考移动端来实现pc端拖动效果。
同学提供的这个例子，已经实现拖动了。js中，只要实现这样的拖动就可以了，不需要一边拖动一边滚动滚动条。另外，实际开发中，拖动往往不需要自己手写，使用现成的插件即可，插件中可能会包含同学想要的效果，同学按需选择插件即可。
祝学习愉快！
0
相似问题