How Jquery writes a single mouse drag effect and code _ jquery

Source: Internet
Author: User
Recently, the project has a mouse drag layer effect, so I made one manually using Jquery and shared it with everyone. I hope I can get guidance from experts and learn how to improve it, I would like to be grateful for the effect of a mouse drag layer in the recent project, so I made a manual use of Jquery and shared it with everyone. I hope I can get guidance from experts, if the Hero thinks that my ideas and code are incorrect or need to be improved, I hope I can give some advice. I am very grateful.

This is my idea.:

1. capture the current mouse position when you press the mouse;

2. Get the current position of the object to be moved;

3. When the mouse moves, the distance between the mouse moves is calculated and the distance is updated to the object location. In my code, I try to use absolute positioning to represent the object location;

4. When the mouse moves out of an object or the mouse is displayed, the object is considered to be inmovable. This variable isMouseDown of the bool type is used in my code. If this variable is true, it indicates that the object is movable. If it is false, indicates that the object is inmovable. When the mouse moves the object out Or pops up, set isMouseDown to false.

Well, the idea is like this. I will post the code below. If my ideas are unclear, I can see it in the Code:

The Code is as follows:





Drag the Layer Code with the mouse

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.