Simple mouse draggable div compatible with IE/FF_html/css_WEB-ITnose

A simple draggable div, as the mouse moves, the div can move accordingly

Main Idea:

A div, register to listen for the onmousedown event, and then process the obtained object and its related values ​​(object height, clientX/clientY position, etc.)

and then switch to monitoring onmousemove Event, update the position attribute of the div object in the mouse movement event

Release the monitoring when the mouse is released, and the position update is completed.

Two points to note :

1. To update the position of the object, you need to use o.style.left, etc., these CSS properties can only be accessed when embedded:

<div id="box" style="left:200px;top:200px;"> box </div>

is inaccessible when placed in , such as:

#box{position: absolute;left:200px;top:200px;width: 200px;}

If you do this, it will show that the value cannot be obtained. Please see the example:

//    alert(e.clientX+"  -- " + o.style.left+" -- "+ X);

The result is: (Details See the code below)

2. In FireFox, the event object cannot be obtained directly . Generally, we will simply use e = e || event Distinguish, where e is the parameter part corresponding to the function in FF

For example:

 document.getElementById("box").onmousedown = function(e){         getObject(this,e||event);       //box捕获事件并处理  e-->FF  window.event-->IE    };

Of course, sometimes it can also be considered like this: use the global object arguments[0 ] to replace the captured event parameters

//    dis = arguments[0]||window.event;   //如果上面那句在FF下无法获取事件，听说可以通过 arguments[0]获取FF下的事件对象

Another commonly used method is used for drag events:

// document.all（IE）使用setCapture方法绑定；其余比如FF使用Window对象针对事件的捕捉        document.all?o.setCapture() : window.captureEvents(Event.MOUSEMOVE);  // document.all（IE）使用releaseCapture解除绑定；其余比如FF使用window对象针对事件的捕捉        document.all?o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)

The last is a div that can be dragged with the mouse

The code has comments, I hope you can understand:

    
        <div id="box" style="left:200px;top:200px;"> box </div>