Dreamweaver教程 FrontPage教程 Flash教程 CSS教程
  • javascript教程
  • 当前位置:教程 > 网页制作 > javascript教程 > 正文

    Javascript 一个拖动类

    编辑:教程网 来源:网络 时间:2011年10月22日 16:47
    <HTML>
    <HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var Drag = {
    sx : 0,
    sy : 0,
    ex : 0,
    ey : 0,
    lx : 0,
    ly : 0,
    offsetX : 0,
    offsetY : 0,
    cdom : null,
    dragAble : false,
    dragFun : null,
    tempDrag : function(){
    Drag.drag.call(Drag);
    },
    cache : {},
    putCache : function(key,v){
    this.cache[key] = v;
    },
    getCache : function(key){
    return this.cache[key];
    },
    dragStart : function(dfun,fn){
    try{
    if(!this.dragAble){
    this.cdom = event.srcElement?event.srcElement:event.target;
    this.cdom.setCapture(true);
    this.sx = event.screenX;
    this.sy = event.screenY;
    this.ex = event.screenX;
    this.ey = event.screenY;
    this.lx = event.screenX;
    this.ly = event.screenY;
    this.dragAble = true;
    this.dragFun = dfun?dfun:null;
    if(fn){fn();}
    this.cdom.attachEvent("onmousemove",Drag.tempDrag);
    }
    }catch(e){
    this.dragEnd();
    }
    },
    drag : function(){
    try{

    if(this.dragAble){
    this.ex = event.screenX;
    this.ey = event.screenY;
    this.offsetX = this.ex - this.lx;
    this.offsetY = this.ey - this.ly;
    if(this.dragFun){this.dragFun();}
    this.lx = this.ex;
    this.ly = this.ey;
    }
    }
    catch(e){
    this.dragEnd(null);
    }
    },
    dragEnd : function(fn){
    if(this.dragAble){
    this.cdom.detachEvent("onmousemove",Drag.tempDrag);
    this.cdom.releaseCapture();
    this.ex = event.screenX;
    this.ey = event.screenY;
    this.dragAble = false;
    if(fn){fn();}
    }
    this.releaseDrag();
    },
    releaseDrag : function(){
    this.ex = 0;
    this.ey = 0;
    this.sx = 0;
    this.sy = 0;
    this.cdom = null;
    this.dragAble = false;
    this.dragFun = null;
    this.cache = {};
    }
    };

    function start(){
    var d = Drag.cdom.cloneNode(true);
    var pos = getBodyPos(Drag.cdom);
    with(d.style){
    position="absolute";
    left=pos.left;
    top=pos.top;
    filter='Alpha(Opacity="30")' ;
    }
    Drag.putCache("alo",d);
    document.body.appendChild(d);

    }
    function ing(){
    var offx = Drag.offsetX;
    var offy = Drag.offsetY;
    var to = Drag.getCache("alo");
    var l = to.offsetLeft;
    var t = to.offsetTop;
    with(to.style){
    left=l+offx;
    top=t+offy;
    }
    }
    function end(){
    var cdom = Drag.cdom;
    var alo = Drag.getCache("alo");
    with(cdom.style)
    {
    left=alo.offsetLeft;
    top=alo.offsetTop;
    position="absolute";
    }
    if(alo)
    document.body.removeChild(alo);
    }
    function getBodyPos(obj){
    try{
    var l = obj.offsetLeft;
    var t = obj.offsetTop;
    while(obj.parentElement != document.body){
    obj = obj.parentElement;
    var tl = obj.offsetLeft;
    var tt = obj.offsetTop;
    l += tl;
    t += tt;
    }
    return {left:l,top:t};
    }catch(e){
    alert(e.message);
    }
    }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY>
    <div style="border:solid 1 #7FFFD4;width:300;height:150;background:#3399FF;cursor:move;" onmousedown="Drag.dragStart(ing,start)" onmouseup="Drag.dragEnd(end)">
  • 原文来自 教程网 转载请注明:http://www.websmill.com/wangye/javascript/29146.html

  • 上一篇:JavaScript中的delete操作符
  • 下一篇:Javascript正则表达式的3个例子