拖拽函数

//oDrag为容器最大宽高的标准。
//handle为点击拖拉移动的地方。
function drag(oDrag, handle){
handle.onmousedown = function(event){
var event = event||window.event;
var maxW = document.documentElement.clientWidth - oDrag.offsetWidth;
var maxH = document.documentElement.clientHeight - oDrag.offsetHeight;
var disX = event.clientX - oDrag.offsetLeft;
var disY = event.clientY - oDrag.offsetTop;
document.onmousemove = function(event){
var event = event || window.event;
var myX = event.clientX - disX;
var myY = event.clientY - disY;

myX = myX < 0 ? 0 : myX;
myX = myX > maxW ? maxW : myX;

myY = myY > maxH ? maxH : myY;
myY = myY < 0 ? 0 : myY;

oDrag.style.left = myX + ‘px‘;
oDrag.style.top = myY + ‘px‘;
return false;
}
document.onmouseup = function(){
document.onmousemove = null;
this.releaseCapture && this.releaseCapture() }
}
this.setCapture && this.setCapture();
return false}

时间: 2024-10-12 18:59:57

拖拽函数的相关文章

javascript——拖拽函数封装

CSS部分: #div1{ width: 100px; height: 100px; background: #ccc; position: absolute;} #img1{ position: absolute;} HTML部分: <div id="div1"></div> <img id="img1" src="img/1.jpg" /> JS部分: window.onload = function(){

拖拽函数封装,元素碰撞

function drag(obj){ obj.onmousedown = function(ev){ var ev = ev || event; //鼠标点击位置到图片两侧距离 var ol = ev.clientX - this.offsetLeft; var ot = ev.clientY - this.offsetTop; //非标准ie下利用全局捕获占用接下来的事件,相当于阻止浏览器默认行为 if(obj.setCapture){ obj.setCapture(); } documen

iPhone手机解锁效果&amp;&amp;自定义滚动条&amp;&amp;拖拽--Clone&amp;&amp;窗口拖拽(改变大小/最小化/最大化/还原/关闭)

<!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-

如何实现Canvas图像的拖拽、点击等操作

上一篇Canvas的博文写完后,有位朋友希望能对Canvas绘制出来的图像进行点击.拖拽等操作,因为Canvas绘制出的图像能很好的美化.好像是想做炉石什么的游戏,我也没玩过. Canvas在我的理解中就好像在一张画布上绘制图像,它只能看到却“摸”不到,那要如何进行操作呢.我不知道网上是怎么做的,这里用自己的想法做了个DEMO分享给大家. 思路: 虽然Canvas不能拖拽,但div可以拖拽,那怎么把二者结合起来呢.初步想法是将一个与Canvas图像大小差不多的div覆盖在其上,在拖拽div时将获

JavaScript动画-模拟拖拽

模拟拖拽的原理: x1等于div.offsetLeft y1等于div.offsetTop x2等于ev.clientX(ev表示event事件) y2等于ev.clientY 当我们在方块上按下鼠标的时候,x2-x1即可确定.移动鼠标之后,我们用鼠标当前的位置即x4.y4减去x2-x1.y2-y1就可以得到方块现在的位置. 效果图:点击查看 代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 &l

canvasn拖拽效果

canvas拖拽和平时用的js拖拽是有区别的 普通的js是设置目标为绝对定位,再根据鼠标的移动来改变left和top的值 canvas是获得了鼠标的位置,直接在目标点进行重新绘制 下面给一个简单的拖拽代码 <canvas id="can" width="400" height="400"></canvas> <script type="text/javascript"> var can =

窗口拖拽(改变大小/最小化/最大化/还原/关闭)

<!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-Typ

Qt窗口添加鼠标移动拖拽事件

1. .h文件中添加 private:    QPoint dragPosition; 2. 在cpp文件中重写鼠标点击和拖拽函数 void ShapeWidget::mousePressEvent(QMouseEvent * event){    if (event->button() == Qt::LeftButton) //点击左边鼠标    {         dragPosition = event->globalPos() - frameGeometry().topLeft(); 

漂亮的Js拖动层,窗口拖拽(改变大小/最小化/最大化/还原/关闭)

<!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-