先来看一个简单的例子,5个盒子在页面中,实现盒子的移动
在css 中设置样式,
<style>
div{
width: 200px;
height:200px;
border: 1px solid #FF0000;
position: absolute;
}
div:nth-child(1){
top:0;
left:0;
}
div:nth-child(2){
top:200px;
left:0;
}
div:nth-child(3){
top:400px;
left:0;
}
div:nth-child(4){
top:600px;
left:0;
}
div:nth-child(5){
top:800px;
left:0;
}
</style>
在body中
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
在js中
<script>
class Drag{
constructor(selector){
this.eles=document.querySelectorAll(selector);
this.startDrag();
}
startDrag() {
for (var i = 0; i < this.eles.length; i++) {
var that = this;
this.eles[i].onmousedown = function (e) {
//console.log(this);
var left = this.offsetLeft;
var top = this.offsetTop;
var cx = e.clientX;
var cy = e.clientY;
that.lenx = cx - left;
that.leny = cy - top;
//console.log(that);
that.move(this);
//console.log(that);
that.up();
}
}
}
move(obj){
var that=this;
document.οnmοusemοve=function (e) {
var cx=e.clientX;
var cy=e.clientY;
obj.style.left=cx-that.lenx+"px";
obj.style.top=cy-that.leny+"px";
}
}
up(){
document.οnmοuseup=function () {
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
}
}
window.οnlοad=function () {
new Drag("div");
}
</script>
看看 经典的盒子拖拽的问题,一个盒子的运动,并且 当鼠标停止时,可以出现缓动
<style>
.parent{
width: 800px;
height: 600px;
border:1px solid #000;
position: absolute;
left: 0;right: 0;top:0;bottom: 0;
margin: auto;
}
.son{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
面向对象的方式
<script>
//面向对象
class drag{
constructor(selector){
this.eles=document.querySelectorAll(selector);
this.starDrag();
}
starDrag(){
var that=this;
for(var i=0;i<this.eles.length;i++){
this.eles[i].οnmοusedοwn=function(e){
that.left=this.offsetLeft;
that.top=this.offsetTop;
that.cx=e.clientX;
that.cy=e.clientY;
that.lenx=that.cx-that.left;
that.leny=that.cy-that.top;
that.move(this);
that.up();
}
}
}
move(obj){
var that=this;
document.οnmοusemοve=function(e){
that.cx=e.clientX;
that.cy=e.clientY;
obj.style.left=that.cx-that.lenx+"px";
obj.style.top=that.cy-that.leny+"px";
}
}
up(){
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
}
}
new drag("div");
</script>
面向过程
<script>
function drag(obj){
this.obj=obj.ele;
this.minx=obj.rect.minx;
this.maxx=obj.rect.maxx;
this.miny=obj.rect.miny;
this.maxy=obj.rect.maxy;
this.dirx=obj.dir.x===false? obj.dir.x:true;
this.diry=obj.dir.y===false? obj.dir.y:true;
this.yizi=0.8;
this.prex=0;
this.prey=0;
this.nextx=0;
this.nexty=0;
this.down();
}
drag.prototype={
down:function(){
var that=this;
this.obj.οnmοusedοwn=function(e){
var left=this.offsetLeft;
var top=this.offsetTop;
var cx=e.clientX;
var cy=e.clientY;
that.x=cx-left;
that.y=cy-top;
that.move();
that.up();
}
},
move:function(){
var that=this;
document.οnmοusemοve=function(e){
var cx=e.clientX;
var cy=e.clientY;
var left=cx-that.x;
var top=cy-that.y;
if(left<that.minx){left=that.minx};
if(left>that.maxx-that.obj.offsetWidth){left=that.maxx-that.obj.offsetWidth};
if(top<that.miny){top=that.miny};
if(top>that.maxy-that.obj.offsetHeight){top=that.maxy-that.obj.offsetHeight};
if(that.dirx){
that.obj.style.left=left+"px";
}
if(that.diry){
that.obj.style.top=top+"px";
}
that.nextx=left;
that.nexty=top;
that.lenx=that.nextx-that.prex;
that.leny=that.nexty-that.prey;
that.prex=that.nextx;
that.prey=that.nexty;
}
},
up:function(){
document.οnmοuseup=()=>{
document.οnmοusemοve=null;
document.οnmοuseup=null;
this.animate();
}
},
animate:function(){
var t=setInterval(()=>{
this.lenx*=this.yizi;
this.leny*=this.yizi;
var x=this.lenx+this.obj.offsetLeft;
var y=this.leny+this.obj.offsetTop;
if(x<this.minx){x=this.minx};
if(x>this.maxx-this.obj.offsetWidth){x=this.maxx-this.obj.offsetWidth};
if(y<this.miny){y=this.miny};
if(y>this.maxy-this.obj.offsetHeight){y=this.maxy-this.obj.offsetHeight};
if(Math.abs(this.lenx)>=Math.abs(this.leny)){
if(Math.abs(this.lenx)<=1){
clearInterval(t);
}
}else{
if(Math.abs(this.leny)<=1){
clearInterval(t);
}
}
if(this.dirx){
this.obj.style.left=x+"px";
}
if(this){
this.obj.style.top=y+"px";
}
},60)
}
}
var son=document.querySelector(".son");
new drag({ele:son,rect:{minx:0,maxx:800,miny:0,maxy:600},dir:{x:true,y:true}})
</script>