时间:2021-05-26
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>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
实现类似windows窗体的效果,在中间拖动改变div位置,在边缘拖动改变div大小,鼠标在相应的位置改变成相应的形状效果如图:(截图没显示鼠标)代码如下:$(
本文实例讲述了JS实现网页Div层Clone拖拽效果。分享给大家供大家参考。具体如下:这是一个层拖动,网页上的拖拽Clone效果实例,两个层可在鼠标的拖动下,任
因为想实现相框的拖到,找了半天的原因愣是没有找到错误,所以,只能翻看源码了如何实现拖动效果?首先分析下拖动效果原理:1.当鼠标在被拖动对象上按下鼠标(触发onm
本文实例讲述了jsdiv拖动动画运行轨迹效果。分享给大家供大家参考。具体如下:这是一款基于js实现的div拖动动画运行轨迹效果源码,是一款原生jsdiv拖动效果
本文实例讲述了微信小程序实现鼠标拖动效果。分享给大家供大家参考,具体如下:1、效果展示2、关键代码index.wxml文件使用鼠标拖动我index.js文件Pa