主页 > 采坑 > 前端采坑 > javascript常见API采坑 >
来源：未知 时间：2021-05-09 15:02 作者：小飞侠 阅读:次
[导读] js实现文档拖动以及鼠标事件 模仿PS等工具页面文档拖动， 思路： 如图所示让父级盒子设置2万宽度，并且控制他们滚动条到 2w/2 的位置。 接下来就是鼠标事件的处理了。 代码如下：...
|
js实现文档拖动以及鼠标事件
模仿PS等工具页面文档拖动， 思路：
如图所示让父级盒子设置2万宽度，并且控制他们滚动条到 2w/2 的位置。 接下来就是鼠标事件的处理了。 代码如下： <!DOCTYPE html>
<html>
<head>
<title>测试页面拖拽</title>
<style type="text/css" media="screen">
body{
margin: 0px; padding: 0px;
}
div, input, textarea, ul {
resize: none;
outline: 0;
font-size: inherit;
}
.mind-container {
position: relative;
overflow: auto;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
.mind-designer {
position: relative;
/* background-attachment: fixed !important; */
/* transition: all 200ms; */
-moz-transition: all 200ms;
-o-transition: all 200ms;
}
</style>
</head>
<body>
<div class="mind-container" id="mind_con" style="height: 969px;">
<div class="mind-designer" style="width: 20000px; height: 20000px; background: rgb(247, 247, 247); cursor: default;"><div class="topic-container " style="position: absolute; top: 10400px; left: 10400px;">
元素拖动鼠标事件详解
<br>
https://blog.csdn.net/Charissa2017/article/details/103863588
</div>
</div>
<script>
window.onload = function(){
console.log('test')
obj.init()
}
var obj = {
data:{
mx:10000,
my:10000,
// 鼠标临时参数
md:{
x:0,y:0,direction:{ v:'',h:''}
},
isDrag: false, // 是否拖动
elementA:document.querySelector("#mind_con")
},
init:function(){
this.event();
this.elemnetInit();
},
elemnetInit:function(){
this.data.elementA.scrollTop = this.data.my
this.data.elementA.scrollLeft = this.data.mx
document.querySelector('#mind_con').style.height = window.innerHeight + 'px';
document.querySelector('.topic-container').style.top = this.data.my + document.querySelector('#mind_con').offsetHeight / 2 + 'px'
document.querySelector('.topic-container').style.left = this.data.mx + document.querySelector('#mind_con').offsetWidth / 2 - document.querySelector('.topic-container').offsetWidth / 2 + 'px'
},
event:function(){
obj.data.elementA.addEventListener('scroll', (e) =>{
obj.data.my = e.target.scrollTop;
obj.data.mx = e.target.scrollLeft;
});
obj.data.elementA.addEventListener('mousedown', (e) =>{
obj.data.isDrag = true; //开启拖动
obj.data.md.x = e.clientX;
obj.data.md.y = e.clientY;
});
obj.data.elementA.addEventListener('mousemove', (e) =>{
if (!obj.data.isDrag){
return
}
obj.data.isDrag = true; //开启拖动
var _mx = e.clientX,
_my = e.clientY,
_msx = _mx - obj.data.md.x,
_msy = _my - obj.data.md.y;
obj.data.md.direction.v = _msx > 0 ? 'left': 'right'
obj.data.md.direction.h = _msy > 0 ? 'up': 'down'
obj.data.mx -= _msx
obj.data.my -= _msy
obj.setBoxMove(); // 设置盒子移动
obj.data.md.x = _mx
obj.data.md.y = _my
});
obj.data.elementA.addEventListener('mouseup', (e) =>{
obj.data.isDrag = false;
});
},
setBoxMove:function(){
this.data.elementA.scrollLeft = obj.data.mx
this.data.elementA.scrollTop = obj.data.my
}
}
</script>
</body>
</html> |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
