html div 可鼠标滚动,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;

});

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

html div 可鼠标滚动,js实现鼠标拖拽div左右滑动相关推荐

vue实现鼠标滚动图片放大缩小拖拽
1.封装可放大缩小拖拽组件 <template><div class="drag-outer"ref="dragWrap":style=&qu ...
JS实现可拖拽div
注意点可拖拽元素为绝对定位分别监听mousedown,mousemove,mouseup三个事件 mousemove事件要判断dragging的值 <div id="box&quo ...
用鼠标左右拖拽 html,js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 Title body{ position: relative; margin:0; padding:0; width ...
JS中鼠标拖拽div（2）（setCapture()方法和releaseCapture()方法）
接着鼠标拖拽div(1)解决问题,当在拖拽事件所在的页面按下键盘的ctrl+A全选后,再去拖拽div,浏览器会默认去搜索网页中的内容,拖拽功能就会失效,(搜索网页内容是浏览器的默认行为,所以要想不发生 ...
JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)
onmousedown:鼠标的按下事件 onmouseove:鼠标的移动事件 onmouseup:鼠标的松开事件思路: 想实现鼠标拖拽div移动的效果,就得先获取到div,然后给div绑定鼠标按下的 ...
【加强版】js原生实现拖拽效果，这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的（但是有个弊端：拖拽过程中鼠标会变成一个禁用符号，不太友好）
<div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...
JS实现拖拽并解决拖拽过程中鼠标抬起仍旧处于拖拽状态问题
需求分析实现一个任意元素可以被鼠标任意拖拽:鼠标在这个元素上按下,开始拖拽,元素跟着鼠标一起移动,当鼠标松开时,被拖拽的元素固定在当前位置上.如图所示(底下灰色的轨迹不知道为啥录制动图就出现了,实际 ...
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
vue 拖拽div 自定义div拖拽
js 可拖拽div内容框记录 1.css样式 .dragDrop{width:220px;height:88px;line-height:88px;text-align: center;backgro ...

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

html div 可鼠标滚动,js实现鼠标拖拽div左右滑动相关推荐

最新文章

热门文章