Home  >  Article  >  Web Front-end  >  How to use jquery to achieve drag and drop effect

How to use jquery to achieve drag and drop effect

WBOY
WBOYOriginal
2021-11-22 15:09:572010browse

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();".

How to use jquery to achieve drag and drop effect

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.

How to use jquery to achieve drag and drop effect

#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.

How to use jquery to achieve drag and drop effect

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

How to use jquery to achieve drag and drop effect

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn