JavaScript to achieve simple drag effect

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) {   

 //get captured Objects     o = obj;     // document.all (IE) is bound using the SetCapture method; others such as FF use window objects for event capture      document.all?o.setcapture ()  : window.captureevents (event.mousemove);        x = e.clientx - parseint (o.style.left);    //gain width,   

  y = e.clienty - parseint (o.style.top);    //get height,} document.getElementById ("Boxmove"). Onmousedown = function (e) {      getobject (this,e| | event);        //boxmove capturing events and handling   e-->FF  

Window.event-->ie}; Document.onmousemove = function (DIS) {    //Mouse Mobile Event handling     if (!o) {        

   return;    &NBSP}     if (!dis) {  //event       

  dis = event ;    &NBSP}     o.style.left = dis.clientx - x + "px" ;      //set Boxmovebox style changes with mouse movement     o.style.top = 

dis.clienty - y +  "px";

}; Document.onmouseup = function () {    //Mouse release event handling     if (!o) {

            return;     }     //  document.all (IE) unbind using ReleaseCapture, others such as FF using Window objects for event capture     document.all? O.releasecapture ()  : window.captureevents (event.mousemove| Event.mouseup)     o =  ';    //empty Object}; 

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