Javascript实现对象的拖动操作

转载 2006年06月23日 12:39:00
学着写的一段鼠标拖动的代码,感觉挺有意思。
本例需要掌握的技巧比较多,捕捉鼠标,获取鼠标位置(相当于对象),释放鼠标捕捉,文档的滚动距离。
1.       setCapture() 设置属于当前文档的对象的鼠标捕捉。
2.       event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
3.       event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
4.       releaseCapture() 释放当前文档中对象的鼠标捕捉。
5.       scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。
6.       scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
7.       with 为一个或多个语句设定默认对象。
8.       event.x,event.y 设置或获取鼠标指针位置相对于窗口对象的 x ,y坐标。
<!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" xml:lang="en" lang="en">
<head>
  
<title></title>
  
<style type="text/css">
  #l1
{
    position
:absolute;top:100px;left:100px;
    width
:100px;height:150px;border:1px solid #ccc;
    background
:#f00;
    z-index
:1
    
}
  #l2
{
    position
: absolute;top:150px;left:150px;
    width
:100px;height:150px;border:1px solid #666;
    background
:#0f0;
    z-index
:2
  
}
  #l3
{
    position
: absolute;top:200px;left:200px;
    width
:100px;height:150px;border:1px solid #999;
    background
:#00f;
    z-index
:3;
  
}
  
</style>
  
<script type="text/javascript">
    
var x,y,z,down=false,obj;
    
function init(){
        obj
=event.srcElement;   //获取焦点对象
        obj.setCapture();           //设置鼠标捕捉
        z=obj.style.zIndex;         //取得原z轴位置
        obj.style.zIndex=100;       //设定在最上层
        x=event.offsetX;            //获取鼠标指针相对于触发事件的对象的x位置
        y=event.offsetY;            //获取鼠标指针相对于触发事件的对象的y位置
        down=true;                  //设置鼠标状态为按下状态
    }
    
function moveIt(){
        
if(down&&event.srcElement==obj){
            
with(obj.style){
                posLeft
=document.body.scrollLeft+event.x-x;
                posTop
=document.body.scrollTop+event.y-y;
            }
        }
    }
    
function stopDrag(){
        down
=false;
        obj.style.zIndex
=z;
        obj.releaseCapture();
    }
  
</script>
</head>
<body>
<div id="l1" onmousedown="init()" onmousemove="moveIt()" onmouseup="stopDrag()">level1</div>
<div id="l2" onmousedown="init()" onmousemove="moveIt()" onmouseup="stopDrag()">level2</div>
<div id="l3" onmousedown="init()" onmousemove="moveIt()" onmouseup="stopDrag()">level3</div>
</body>
</html>

Window下拖放操作Drag & Drop 全解析

一、基本概念 拖放,是指用鼠标拖动的方法,在不同程序的窗口之间、同一个程序的不同窗口之间或同一程序同一窗口的不同控件之间,进行移动、复制和粘贴等操作的技术。拖放操作是在操作系统的帮助下完成的。被...
  • u010042142
  • u010042142
  • 2014年06月17日 11:04
  • 1497

简单几步原生javascript实现元素拖拽功能兼容所有浏览器

代码 *{margin: 0;padding: 0;} 按住左键拖动 window.onload = function() { //...
  • u012906135
  • u012906135
  • 2016年09月30日 14:54
  • 1223

JS拖拽元素原理及实现代码

拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的。下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友! 一、拖拽的流程动作 ①鼠标按下 ②鼠标移动 ...
  • qczxl
  • qczxl
  • 2015年12月03日 13:38
  • 8313

JavaScript中操作对象的属性

1.操作对象的属性 注意: 标签属性与DOM对象属性的对应关系: 绝大部分2者是相同的,如:imgobj.src属性对应中src属性,但也有例外,如中,操作class属性用divobj.cl...
  • bluedream1219
  • bluedream1219
  • 2015年07月30日 18:27
  • 530

javascript Range对象跨浏览器常用操作

转摘自: http://kjah.iteye.com/blog/420624 最近在开发在线代码编辑器的过程中频繁接触Range对象,由于跨浏览器的需求,使用到ie下TextRang...
  • FuDesign2008
  • FuDesign2008
  • 2012年05月15日 12:57
  • 2653

JavaScript操作Document对象内容集合

document.title //设置文档标题等价于HTML的title标签 document.bgColor //设置页面背景色 document.fgColor //设置前景色(文本颜色) ...
  • itstt
  • itstt
  • 2013年05月19日 08:07
  • 697

Javascript中对象的声明和操作

Javascript 是基于对象的语言,它没有类的概念,但是
  • u010589037
  • u010589037
  • 2014年04月24日 11:05
  • 910

Javascript:字符串对象(string)的基本操作

Javascript字符串基本操作。
  • books1958
  • books1958
  • 2015年02月03日 09:33
  • 705

从零开始学_JavaScript_系列(40)——对象的扩展(3)当枚举、原型链遇见对属性的操作

0、一句话总结 属性名,以及是属性的函数的简洁写法,写起来简单易阅读属性名可以用变量字符串拼接起来(话说以前也有吧?)函数都有name属性,但set和get也要加前缀Object.is判断两个变...
  • js_admin
  • js_admin
  • 2017年07月28日 10:43
  • 242

JavaScript对象之数值操作-Number

Number数值运算在一般应用中都是相当常用的,如“四舍五入”,“格式化数值长度”,“保留几位小数”等操作都是很有必要的。...
  • boonya
  • boonya
  • 2016年08月26日 14:35
  • 322
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Javascript实现对象的拖动操作
举报原因:
原因补充:

(最多只允许输入30个字)