javascript 拖放

时间：2007-10-31 来源：shiwudao

参照著名的DOMdrag改写的，只实现了指定一个titlebar的拖动。用法： <div id="area"> <div id='handle'>DRAG ME</div> </div> 然后拖住"DRAG ME"就可以拖动了。代码： var MYDrag = {
target : null,

        my_makeDrag : function(title, root) {
     if(!(title && root)) return;
     title.onmousedown = MYDrag.my_dragStart;
     title.root = root;
        },         my_dragStart : function(ev) {
            var event = window.event?window.event:ev;
            if(this.setCapture) this.setCapture();

            //else if(window.captureEvents)
  // window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);             MYDrag.target = this;
            MYDrag.target.lastX = event.clientX;
            MYDrag.target.lastY = event.clientY;

            MYDrag.target.saved_onmousemove = document.onmousemove;
            MYDrag.target.saved_onmouseup = document.onmouseup;
            document.onmousemove = MYDrag.my_dragIng;
            document.onmouseup = MYDrag.my_dragDone;
        },         my_dragIng : function(ev) {
            var event = window.event?window.event:ev;
            var py = event.clientY;
     var px = event.clientX;

     if(py < 0 || py >document.body.clientHeight || px < 0 || px > document.body.clientWidth) {
     return false;
     }

     var ox = parseInt(MYDrag.target.root.style.left);
            var oy = parseInt(MYDrag.target.root.style.top);
            var nx = ox + px - MYDrag.target.lastX;
            var ny = oy + py - MYDrag.target.lastY;
            var w = MYDrag.target.root.style.right - ox;
            var h = MYDrag.target.root.style.bottom -oy;

            //if(ny<0||ny>document.body.clientHeight||nx+w<0||nx>document.body.clientWidth) {
            // return false;
            //}
            MYDrag.target.root.style.left = nx + "px";
     MYDrag.target.root.style.top = ny+ "px";
     MYDrag.target.lastX = px;
     MYDrag.target.lastY = py;
     return false;
        },         my_dragDone : function(ev) {
            if(this.releaseCapture)
      this.releaseCapture();
            //else if(window.releaseEvents)
  //    window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
     document.onmousemove = MYDrag.target.saved_onmousemove;
     document.onmouseup   = MYDrag.target.saved_onmouseup;
     MYDrag.target = null;
}
};

相关阅读更多 +