JS: Simple Drag effect

Effect Demo: https://jsfiddle.net/dwqs/b5ywws9f/embedded/result/

Html:

<Div class= "Wrap">    <Div ID= "Boxmove" style= "left:150px;top:150px;">Movebox</Div> </Div>

Css

#boxmove {position:Absolute;        width:200px;        Border:1px solid #ccc;        Height:200px;        Color:Red;        Background-color:Blue;        text-align:Center;        font-size:30px;}

Js

var o,   //captured event      X,  //boxmove horizontal width      Y;  //boxmove Vertical Height function GetObject (obj,e) {    //Gets the captured object    o = obj;    //document.all (IE) binds using setcapture method, others such as FF use

//window Object snapping to eventsDocument.all?o.setcapture (): Window.captureevents (Event.mousemove); X = E.clientx-parseint (o.style.left);//Get width,Y = E.clienty-parseint (o.style.top);//Get height,}document.getelementbyid ("Boxmove"). onmousedown =function(e) {
Boxmove captures events and processes  E-->ff  Window.event-->ie

getobject (this , e| |       event ); };d ocument.onmousemove = function  (dis) { if  (!o) {return; } if  (!dis) {//event  dis = event ; }

//settings Boxmovebox style changes with mouse movement  
        O.style.left = dis.clientx-x + "px" ;   

"px";};

function (){   

//Mouse release event handling   

if return; }   

document.all (IE) use releasecapture to unbind;

The rest, for example, FF uses the Window object to capture the event

    Document.all?o.releasecapture (): Window.captureevents (

event.mousemove| Event.mouseup)    ';   //Empty object };

Note that you need to change the left and top of the div. These two attributes need to be given inline, otherwise not.

Original: http://www.ido321.com/1489.html

Reference Documentation:

Https://developer.mozilla.org/en-US/docs/Web/API/Window/captureEvents

Https://developer.mozilla.org/zh-CN/docs/Web/API/element/setCapture

Https://developer.mozilla.org/zh-CN/docs/Web/API/Document/releaseCapture

JS: Simple Drag effect