js实现鼠标拖拽效果的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;

});

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

总结

以上是编程之家为你收集整理的js实现鼠标拖拽div左右滑动全部内容，希望文章能够帮你解决js实现鼠标拖拽div左右滑动所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！