手机
当前位置:查字典教程网 >编程开发 >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实现拖动效果】相关文章:

JavaScript实现鼠标点击后层展开效果的方法

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

js实现仿Windows风格选项卡和按钮效果

一个很简单的办法实现TD的加亮效果.

js操作css属性实现div层展开关闭效果的方法

Js和JQuery获取鼠标指针坐标的实现代码分享

javascript鼠标滑动评分控件完整

COOL而实用的动态效果

javascript实现获取服务器时间

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

精品推荐
分类导航