JS鼠标拖拽实例分析
本文实例讲述了JS鼠标拖拽实现方法。分享给大家供大家参考，具体如下：
JS代码：
<script>
window.onload=function()
{
var oDiv=document.getElementById('div');
var disX=0;
var disY=0;
oDiv.onmousedown=function(ev) //鼠标按下DIV
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft; //鼠标的X坐标减去DIV的左边距就等于disX, 这个disXs是用于确定鼠标移动DIV时鼠标点和DIV之间的左面距离，这个距离是不会变的，通过这个新鼠标的X坐标减去disX就是DIV的Left
disY=oEvent.clientY-oDiv.offsetTop; //鼠标的Y坐标减去DIV的左边距就等于disY, 这个disY是用于确定鼠标移动DIV时鼠标点和DIV之间的上面距离，这个距离是不会变的，通过这个新鼠标的Y坐标减去disY就是DIV的Top
document.onmousemove=function(ev) //为了防止鼠标移动太快而离开了DIV产生了bug，所以要给整个页面加onmousemove事件
{
var oEvent=ev||event;
var oLeft=oEvent.clientX-disX; //新鼠标X坐标减去disX,也就是鼠标移动DIV后的Left
var oTop=oEvent.clientY-disY; //新鼠标Y坐标减去disY,也就是鼠标移动DIV后的Top
if(oLeft<0) //当DIV的Left小于0，也就是移出左边
{
oLeft=0; //就把DIV的Left设置为0，就不能移出左边
}
else if(oLeft>document.documentElement.clientWidth-oDiv.offsetWidth) //屏幕宽度减去DIV的宽度就得出了DIV到达最右边的宽度，如果Left大于这个像素
{
oLeft=document.documentElement.clientWidth-oDiv.offsetWidth; //就把Left设置为这个像素
}
if(oTop<0) //当DIV的To小于0，也就是移出左边
{
oTop=0; //就把DIV的Top设置为0，就不能移出上边
}
else if(oTop>document.documentElement.clientHeight-oDiv.offsetHeight) //屏幕高度减去DIV的高度就得出了DIV到达最下面边的像素，如果Top大于这个像素
{
oTop=document.documentElement.clientHeight-oDiv.offsetHeight; //就把Top设置为这个像素
}
oDiv.style.left=oLeft+'px'; //DIV的Left设置为新鼠标X坐标减去disX的值
oDiv.style.top=oTop+'px'; //DIV的Top设置为新鼠标Y坐标减去disY的值
};
document.onmouseup=function() //鼠标松开时
{
document.onmousemove=null; //把鼠标移动清楚
document.onmouseup=null; //把鼠标松开清楚
};
return false; //阻止FireFox的默认事件 bug
};
};
</script>
完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{width:200px;height:200px;background:black;position:absolute;top:0;left:0;}
</style>
<script>
window.onload=function()
{
var oDiv=document.getElementById('div');
var disX=0;
var disY=0;
oDiv.onmousedown=function(ev) //鼠标按下DIV
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft; //鼠标的X坐标减去DIV的左边距就等于disX, 这个disXs是用于确定鼠标移动DIV时鼠标点和DIV之间的左面距离，这个距离是不会变的，通过这个新鼠标的X坐标减去disX就是DIV的Left
disY=oEvent.clientY-oDiv.offsetTop; //鼠标的Y坐标减去DIV的左边距就等于disY, 这个disY是用于确定鼠标移动DIV时鼠标点和DIV之间的上面距离，这个距离是不会变的，通过这个新鼠标的Y坐标减去disY就是DIV的Top
document.onmousemove=function(ev) //为了防止鼠标移动太快而离开了DIV产生了bug，所以要给整个页面加onmousemove事件
{
var oEvent=ev||event;
var oLeft=oEvent.clientX-disX; //新鼠标X坐标减去disX,也就是鼠标移动DIV后的Left
var oTop=oEvent.clientY-disY; //新鼠标Y坐标减去disY,也就是鼠标移动DIV后的Top
if(oLeft<0) //当DIV的Left小于0，也就是移出左边
{
oLeft=0; //就把DIV的Left设置为0，就不能移出左边
}
else if(oLeft>document.documentElement.clientWidth-oDiv.offsetWidth) //屏幕宽度减去DIV的宽度就得出了DIV到达最右边的宽度，如果Left大于这个像素
{
oLeft=document.documentElement.clientWidth-oDiv.offsetWidth; //就把Left设置为这个像素
}
if(oTop<0) //当DIV的To小于0，也就是移出左边
{
oTop=0; //就把DIV的Top设置为0，就不能移出上边
}
else if(oTop>document.documentElement.clientHeight-oDiv.offsetHeight) //屏幕高度减去DIV的高度就得出了DIV到达最下面边的像素，如果Top大于这个像素
{
oTop=document.documentElement.clientHeight-oDiv.offsetHeight; //就把Top设置为这个像素
}
oDiv.style.left=oLeft+'px'; //DIV的Left设置为新鼠标X坐标减去disX的值
oDiv.style.top=oTop+'px'; //DIV的Top设置为新鼠标Y坐标减去disY的值
};
document.onmouseup=function() //鼠标松开时
{
document.onmousemove=null; //把鼠标移动清楚
document.onmouseup=null; //把鼠标松开清楚
};
return false; //阻止FireFox的默认事件 bug
};
};
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
js实现百度登录框鼠标拖拽效果
以百度的登录窗口为例,学习鼠标拖拽效果如何实现,拖拽范围限定以及登录窗口自动居中.学会如何制作弹出窗口特效,了解把元素设置为可拖拽的原理. 知识点: 1.掌握对可拖拽对话框的实现原理 2.了解元素如何触发脚本方法以及如何编写侦听事件 3. 学会设置元素在页面中居中和全屏 注意区别: 1.screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. 2.clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照
-
jsMind通过鼠标拖拽的方式调整节点位置
jsMind是一个纯javascript实现的思维导图类库,基于html5的canvas实现,以BSD协议开源. 提供了思维导图的显示,编辑等功能,支持freemind数据格式,有丰富的开发接口可供使用,具体功能请访问软件主页进一步了解. jsMind 现已支持通过鼠标拖拽的方式调整节点位置了.只需引用最新版本的 jsmind.js 以及 jsmind.draggable.js 即可使用该功能.需要注意的是,当思维导图设置为不可编辑的时候,拖拽功能也将同时禁止. 请访问 项目主页:http://
-
js实现登录框鼠标拖拽效果
效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录框鼠标拖拽效果</title> <style type="text/css"> body { background: url("https://timgsa.baidu.com/timg?i
-
使用javaScript实现鼠标拖拽事件
本文实例为大家分享了js实现鼠标拖拽事件的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; } div{ position: absolute; top: 200px;/*div的y轴*/ left: 150px;/*div的x轴*/ width: 3
-
超酷的鼠标拖拽翻页(分页)效果实现javascript代码
拖动分页 body{ border:0px; margin:0px; overflow:hidden; background-color:transparent; font-family:宋体; } .page{ position:absolute; width:700px; border:1px solid #999; background-color:#000; left:425px; margin-left:-350px; cursor:default; z-index:0; } ul{
-
鼠标拖拽移动子窗体的JS实现
1.子窗体 在设计网站的时候,我们需要设计一些模态的子窗体,比如 这一步很容易实现,只需要div+css就ok了,请看代码: 复制代码 代码如下: <div class="modal-background"></div> <div class="modal-window"> <div class="head"> <center>点住着块区域可以改
-
javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)
mousedown 的时候创建拖动对象,mouseup的时候释放对象,原理弄清楚了其实很简单. 简单拖拽实现代码: 简单拖拽实现 *{margin:0;padding:0;} #box{ margin:20px auto; position:relative; width:400px; height:400px; background:#ccc; border:1px solid #333; postion:relative; } #dragBox{ width:50px; height:50p
-
js实现使用鼠标拖拽切换图片的方法
本文实例讲述了js实现使用鼠标拖拽切换图片的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} .m-slider{width:600px;margin:0 auto 10px !importan
-
js实现鼠标拖拽多选功能示例
最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo: 遮罩出现: 被遮罩盖住的,即为选中的块(背景色为粉色) 下面是具体代码,注释已在文中,与大家交流. <!DOCTYPE html> <html> <head> <title>鼠标拖拽多选功能</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"&
-
JS鼠标拖拽实例分析
本文实例讲述了JS鼠标拖拽实现方法.分享给大家供大家参考,具体如下: JS代码: <script> window.onload=function() { var oDiv=document.getElementById('div'); var disX=0; var disY=0; oDiv.onmousedown=function(ev) //鼠标按下DIV { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; //鼠标的X
-
完美的js div拖拽实例代码
本文实例为大家分享了完美的js div拖拽实例代码,供大家参考,具体内容如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head
-
微信小程序开发图片拖拽实例详解
微信小程序开发图片拖拽实例详解 1.编写页面结构:moveimg.wxml <view class="container"> <view class="cnt"> <image class="image-style" src="../uploads/foods.jpg" style="left:{{ballleft}}px;width:{{screenWidth}}px" bi
-
JavaScript 拖拽实例代码
一.JS 拖拽的实现实例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>拖拽js</title> <style type="text/css"> html, body { overflow:hidden; } body, div, { margin:0; pad
-
js完美的div拖拽实例代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="
-
Android HorizontalScrollView内子控件横向拖拽实例代码
前言 网上ListView上下拖动的例子有,效果也很好,但是项目要横着拖的,只要硬着头皮自己写(主要是没找到合适的),参考文章1修改而来,分享一下. 正文 截图 实现代码: public class HoDragActivity extends Activity { private LinearLayout main; private GestureDetector mGestureDetector; @Override public void onCreate(Bundle savedInst
-
js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery.min.js"></script> <style&
-
JavaScript鼠标拖拽事件详解
本文实例为大家分享了js鼠标拖拽事件的详细实现代码,供大家参考,具体内容如下 图片如下: css代码 <style> *{ margin:0; padding:0; } #box{ width: 200px; height: 200px; background: url("./img/aio.png") no-repeat; background-size: cover; position: absolute;/*定位元素 父级元素window就是初始包含块*/ top:0
-
JS实现拖拽的方法分析
本文实例分析了JS实现拖拽的方法.分享给大家供大家参考,具体如下: 分析: 1.鼠标按下,拖拽开始,鼠标移动,拖拽进行,鼠标抬起,拖拽结束(三个事件) 2.被拖动元素与鼠标之间的位置在拖动过程中始终不变,利用这个原理,被拖动元素的位置就是鼠标的左(上)边距-鼠标与被拖动元素之间的距离 注意:onmousemove应该是在onmousedown发生时进行,不然不需要点击也能拖动了. 用户可能会将拖动层脱出窗口外. 核心代码: window.onload=function(){ var box=do
-
原生js拖拽实现图形伸缩效果
本文实例为大家分享了js拖拽实现图形伸缩效果的具体代码,供大家参考,具体内容如下 点击矩形的四个角和四个边实现不同的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&