How to use jquery to achieve drag and drop effect

How to use jquery to achieve the drag effect: 1. Use the "$("#element id value")" statement to obtain the element node according to the specified id value; 2. Use the draggable() method to add drag to the element node The effect, the syntax is "element node.draggable();".

The operating environment of this tutorial: windows7 system, jquery1.10.0 version, Dell G3 computer.

How to use jquery to achieve drag and drop effect

#1. Introduce jquery and jquery-ui into the HTML interface. jquery must precede jquery-ui. , otherwise the desired effect cannot be achieved. Nest a div into the div and add an id. I added the id of f and s to the div. Set the style effect of f and add a border to it.

Set the style of s again, the size should not exceed the previous f, and set the background color to red.

#2. The basic styles have been written. Then we started to add a drag effect to the red div. Use ("#s") to get the red div, and then call the draggable method to add a drag effect to the obtained red div.

At this time, you can drag the red div with the mouse. Then move it to the black border.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of How to use jquery to achieve drag and drop effect. For more information, please follow other related articles on the PHP Chinese website!