JQuery implements the example code (Common Code) for div drag at will, jquerydiv

JQuery implements the example code (Common Code) for div drag at will, jquerydiv

Pay attention to the js location, which should be placed close to it. If it is overwritten by others, it cannot be moved.

For example:

<Div id = "move"> movable DIV </div>

Introduce jquery. js, jquery-ui.js,

<script scr="http://code.jquery.com/jquery-1.10.2.js"></script><script scr="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

One sentence:

$("#move").draggable();

If you want to click it, the mouse changes to the hand shape:

$("#move").mousedown(function(){$(this).css("cursor","pointer");}).mouseup(function(){$(this).css("cursor","default");});

The following is a general-purpose code for jquery to implement the common method of dragging a div.

<Script type = "text/javascript"> <! -- $ (Document ). ready (function () {$ (". show "). mousedown (function (e) // e mouse event {cursor (this).css ("cursor", "move"); // change the shape of the mouse pointer var offset =$ (this ). offset (); // The Position of the DIV in the page var x = e. pageX-offset. left; // obtain the distance between the mouse pointer and the left border of the DIV element. var y = e. pageY-offset. top; // obtain the distance between the mouse pointer and the upper boundary of the DIV element $ (document ). bind ("mousemove", function (ev) // bind the move event of the mouse. Because the cursor must have an effect outside the DIV element, use the doucment event, instead of DIV element events {$ (". show "). stop (); // after adding this, var _ x = ev. pageX-x; // obtain the value var _ y = ev. pageY-y; // get the value that moves in the y axis direction $ (". show "). animate ({left: _ x + "px", top: _ y + "px"}, 10) ;}); $ (document ). mouseup (function () {$ (". show "example .css (" cursor "," default "); $ (this ). unbind ("mousemove") ;}) // --> </script>

Articles you may be interested in:

• JQuery can drag the div to implement the Code help house correction version
• Use JQuery + EasyDrag to bring up a drag-and-drop Div. At the same time, pass the value to the Div and return the selected value of the Div.
• Jquery allows you to drag a DIV to customize an instance to save data.
• Jquery div drag effect sample code
• Implementation principle and example of jQuery drag div, move div, and pop-up layer
• JQuery implements the DIV layer fade-in and fade-out drag effect method
• JQuery implements Div drag + keyboard control
• Jquery implements a DIV instance that can be dragged like JqueryUi
• JQuery click to bring up the Div Layer window (you can close and drag it)