用鼠标左右拖拽 html,js实现鼠标拖拽div左右滑动

本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码，供大家参考，具体内容如下

Title

body{

position: relative;

margin:0;

padding:0;

width:100%;

height: 1000px;

}

#box{

height: 50px;

width:200px;

position: absolute;

left:50%;

top:50%;

margin-left:-200px;

margin-top:-200px;

background: #CDCDCD;

}

#small-box{

height: 50px;

width:50px;

position: absolute;

left:0;

top:0;

background: #FF66CC;

cursor:move ;

opacity: 0.7;

}

var box=$("#small-box");

var body=$('body');

var index=0;

var x1;

box.mousedown(function(){

index=1; //鼠标按下才能触发onmousemove方法

var x=event.clientX; //鼠标点击的坐标值，x

var left= this.style.left;

left=left.substr(0,left.length-2); //去掉px

x1=parseInt(x-left);

});

box.mousemove(function(){

if(index===1){

this.style.left=event.clientX-x1+'px';

if(this.style.left.substr(0,this.style.left.length-2)<0){

this.style.left=0;

};

if(this.style.left.substr(0,this.style.left.length-2)>150){

this.style.left='150px';

};

}

});

box.mouseup(function(){

index=0;

});

body.mouseup(function(){

index=0;

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

时间： 2020-01-14