手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js 鼠标拖动对象 可让任何div实现拖动效果
js 鼠标拖动对象 可让任何div实现拖动效果
摘要:js鼠标拖动对象:复制代码代码如下://定义鼠标拖动对象drag=function(a,o){vard=document;if(!a)a=w...

js鼠标拖动对象:

复制代码 代码如下:

//定义鼠标拖动对象

drag=function (a,o){

var d=document;if(!a)a=window.event;

if(!a.pageX)a.pageX=a.clientX;

if(!a.pageY)a.pageY=a.clientY;

var x=a.pageX,y=a.pageY;

if(o.setCapture)

o.setCapture();

else if(window.captureEvents)

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

var backData = {x : o.style.top, y : o.style.left};

d.onmousemove=function(a){

if(!a)a=window.event;

if(!a.pageX)a.pageX=a.clientX;

if(!a.pageY)a.pageY=a.clientY;

var tx=a.pageX-x+parseInt(o.style.left),ty=a.pageY-y+parseInt(o.style.top);

o.style.left=tx+"px";

o.style.top=ty+"px";

x=a.pageX;

y=a.pageY;

};

d.onmouseup=function(a){

if(!a)a=window.event;

if(o.releaseCapture)

o.releaseCapture();

else if(window.captureEvents)

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

d.onmousemove=null;

d.onmouseup=null;

if(!a.pageX)a.pageX=a.clientX;

if(!a.pageY)a.pageY=a.clientY;

if(!document.body.pageWidth)document.body.pageWidth=document.body.clientWidth;

if(!document.body.pageHeight)document.body.pageHeight=document.body.clientHeight;

if(a.pageX < 1 || a.pageY < 1 || a.pageX > document.body.pageWidth || a.pageY > document.body.pageHeight){

o.style.left = backData.y;

o.style.top = backData.x;

}

};

}

使用方法:

复制代码 代码如下:

<div id="divPhoto" onmousedown="drag(event,this)"></div>

【js 鼠标拖动对象 可让任何div实现拖动效果】相关文章:

jquery表单对象属性过滤选择器用法

js控制div弹出层实现方法

javascript搜索框效果实现方法

javascript基于DOM实现权限选择实例分析

js实现带按钮的上下滚动效果

多种js图片预加载实现方式分享

jQuery插件jRumble实现网页元素抖动

javascript结合Flexbox简单实现滑动拼图游戏

js实现简单div拖拽功能实例

js去除浏览器默认底图的方法

精品推荐
分类导航