Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use jquery to achieve drag effect

2025-01-17 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/02 Report--

This article is about how to use jquery to achieve the effect of procrastination. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

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

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

1. The introduction of jquery and jquery-ui,jquery into the interface in HTML must be in front of jquery-ui, otherwise you can't achieve the desired effect. Nest a div for div and add id. I added id for f and s to div. Set the style style effect of f and add a border to it.

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

2. All the basic styles have been written. Then we start 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 acquired red div.

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

Thank you for reading! This is the end of this article on "how to use jquery to achieve procrastination effect". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report