This time I will show you how to use Vue to achieve the drag and drop effect. What are the precautions for using Vue to achieve the drag and drop effect? The following is a practical case, let's take a look.
Rendering
Clear the difference between clientY pageY screenY layerY offsetY
When we want to make a drag When dragging this effect, we need to distinguish the difference between these attributes. These attributes are all used to calculate the offset value of the mouse click. We need to understand them before we can continue to realize our dragging effectclientY refers to the distance from the upper left corner of the visible pagepageY refers to the distance from the upper left corner of the visible page (not affected by page scrolling)
screenY refers to the distance from the upper left corner of the screen
layerY refers to the distance to the nearest positioned upper left corner of it or its parent element.
offsetY refers to the distance to its own upper left corner.
A picture will give you a simple understanding.
Difference
After we briefly understand these attributes, there are several attributes that need to be distinguished. Different pointsclientYDistance from the upper left corner of the pageAffected by page scrollingpageYThe distance from the upper left corner of the pageNot affected by page scrolling
Similar points | ||
---|---|---|
The difference between layerY and offsetY
Now that we are familiar with the meaning of these offset properties, let’s get to our focus. Without further ado, let’s get straight to the code
// darg.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
|
Of course, we can bind it as a custom instruction, so that it can be implemented in the form of a calling instruction Drag effect, the following is the code to define custom instructions
// darg.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
|
Finally
At this point we have implemented the drag effect with Vue , we used two different methods to implement drag and drop, but in fact, we need to clarify the differences between pageY, screenY, clientY, layerY, offsetY, etc. Of course, we also learned some methods of Vue, such as custom instructions.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Summary of Node.js file encoding format conversion methods How to add customer service to the WeChat applet ButtonThe above is the detailed content of How to use Vue to implement drag and drop effect. For more information, please follow other related articles on the PHP Chinese website!