Js achieves div drag on the page, and jsdiv drag on the page

Js achieves div drag on the page, and jsdiv drag on the page

This article describes how to drag a div on a page using js. We will share this with you for your reference. The details are as follows:

<Style type = "text/css"> body {margin: 0px; }# div1 {display: none; position: absolute; z-index: 1000; height: 100%; width: 100%; background: #000000; filter: Alpha (opacity = 30) ;}# div2 {display: none; position: absolute; height: 100%; width: 100%; padding-top: 10%; z-index: 1001; }# div3 {display: block; position: absolute; z-index: 999 ;} </style> <script type = "text/javascript"> // defines the moving object and Moving Coordinate var Mouse_Obj. = "None", _ x, _ y; // drag the object function (automatic) document. onmousemove = function () {if (Mouse_Obj! = "None") {document. getElementById (Mouse_Obj ). style. left = _ x + event. x; document. getElementById (Mouse_Obj ). style. top = _ y + event. y; event. returnValue = false ;}/// stop the drag function (automatic) document. onmouseup = function () {Mouse_Obj = "none";} // determines that the function o of the dragged object is the function m (o) of the dragged object {Mouse_Obj = o; _ x = parseInt (document. getElementById (Mouse_Obj ). style. left)-event. x; _ y = parseInt (document. getElementById (Mouse_Obj ). style. top)-event. y ;}</script> <div id = "div1"> </div> <div id = "div2" onmousedown = "m (this. id) "style =" left: 0px; top: 0px; "> <table width =" 50% "border =" 0 "cellpadding =" 3 "cellspacing =" 1 "style =" background: # ff7300; position: static; filter: progid: DXImageTransform. microsoft. dropShadow (color = #666666, offX = 4, offY = 4, positives = true) "align =" left "> <tr style =" cursor: move; "> <td> <font color =" # FFFFFF "> tips: </font> </td> <td align = "right"> <input type = "button" value = "x" onClick = "document. getElementById ('div1 '). style. display = 'none'; document. getElementById ('div2 '). style. display = 'none'; "style =" cursor: hand; "> </td> </tr> <td colspan =" 2 "width =" 100% "bgcolor =" # FFFFFF "height =" 150 "align =" middle "> welcome to <a href =" http://www.bkjia.com "> http://www.bkjia.com </a> </td> </tr> </table> </div> <div id =" div3"> <input type = "button" value = "Open layer" onClick = "document. getElementById ('div1 '). style. display = 'block'; document. getElementById ('div2 '). style. display = 'block'; "> </div>