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

The knowledge of this article "how to use js components to achieve draggable div" is not understood by most people, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use js components to achieve draggable div" article.

The effect you want to achieve

As long as the div is registered with the component, the target div can be dragged at will

You can set the range that div can drag

Implementation analysis

The basic writing of js components and the logic of div drag will not be discussed in detail. As mentioned in the previous article, you can click on the link below to see

Js implements div draggability

The basic Writing of js components

Here is the main analysis of how to limit the scope of dragging, first take a look at the following figure:

Limit the scope

There are four kinds of edge situations when dragging, that is, 1, 2, 3, 4 in the picture. Let's look at them one by one.

When div is dragged to position 1, if you drag to the left, it should fail, that is, the left of dragging div is always equal to the left value of the outer div.

When div is dragged to position 2, it should be invalid if we drag it up again, that is, the top of dragging div is always equal to the top value of the outer div.

When the div is dragged to position 3, it should be invalid if we drag to the right, that is, the left of dragging the div is always equal to the width of the left of the outer div plus the width of the outer div, and then subtract the width of the drag div

When the div is dragged to position 4, we drag down again, it should be invalid, that is, the top of dragging the div is always equal to the height of the top of the outer div plus the height of the outer div, and then minus the height of the dragging div.

Now that the theoretical knowledge is clear, let's take a look at the results achieved.

Dragging in a range

The code for the implementation is posted below

Introduce components into html and initialize

Introducing components into html

Specific implementation of js components

Js drag component 1

The above is about the content of this article on "how to use js components to achieve draggable div". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.

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.