Official API: http://carloswilkes.com/Documentation/LeanTouch
plugin address: https://assetstore.unity.com/packages/tools/input-management/lean-touch-30111
LeanTouch
LeanTouch is a Unity touch plug-in that integrates various operations on the touch screen and is one of the commonly used plug-ins.
Demo tested the use of LeanTouch to realize independent dragging of multiple UI boxes. And add the ScrollView text drag box in the UI box to realize the compatibility of drag and drop between the two.
Unity version: 2021.3.6f1c1
Lean Touch 3.0.0
Demo source code: https://download.csdn.net/download/qq_17523181/86904941
Step One: Create a Base
- Install Lean Touch via Package Manager -> My Assets ->
- In Hierarchy, right click -> Lean -> Touch to create a basic plug-in (LeanTouch)
- Make 2 UIs with ScroolView
Step 2: Implement simple dragging
- Add the LeanDragTranslate script to Box(1). If you run it at this time, you will find that Box(1) cannot be dragged;
- Remove the Raycast Target of the Bg picture, and find that Box(1) can be dragged, but it needs to be outside of Box(1);
- Remove the tick of Ignore Started Over Gui in the LeanDragTranslate script of Box(1), and find that the inside of Box(1) can also be dragged
The drag response of LeanTouch will be blocked by the UI layer. So you need to go to the Raycast Target of the Bg picture; remove the tick of Ignore Started Over Gui to make sure that this UI layer needs Touch response.
Step 3: Two Boxes can be dragged independently
- Add the LeanDragTranslate script to Box (2), and remove the Ignore Started Over Gui of the LeanDragTranslate script. It is found that the dragging is performed by two Boxes at the same time, and cannot be dragged separately.
- Add the Lean Selectable By Finger script to Box (1), run it, and find that Box (1) cannot be dragged, but Box (2) can be dragged, because the default Lean Selectable By Finger script is unselected. So Box(1) cannot be dragged in the unselected state.
- In the running state, we checked Self Selected and found that both Boxes can be dragged. Next, use this function to realize Box dragging alone.
- Next, use LeanFingerDown + LeanSelectByFinger to trigger LeanSelectableByFinger; add these two scripts to the LeanTouch object (basic component). (not on the Box layer)
- For LeanFingerDown, you need to remove the hook of Gui, and bind OnFinger with the LeanSelectByFinger script trigger.
Overall process: After the Finger is clicked, the ray is triggered, and the ray hits the object with Selectabe, making it ticked.
- Run it at this time, and find that dragging at the background, Box will not stop dragging, and dragging on Box1, Box2 will not be passive. Continue to drag Box2, and find that both Boxes are dragged at the same time. Because at this time, both Boxes have been marked with Selectable. Next, to achieve how to tick
- In LeanSelectByFinger, check Deselect With Nothing. When I click on the background, the Selectable ticks of the two Boxes will be removed.
- At this point, when I click Box1 to drag, then click Bg, and then click Box2, Box2 can be dragged separately. However, if you click Box2 directly after clicking Box1, the two Boxes will still be dragged at the same time.
- In Box's LeanSelectableByFinger, configure Events, OnSelected Select Finger Up, and run your own Deselect() function when the mouse is lifted.
- At this point, the 2 Boxes can be dragged independently
Step 4: Drag Compatible with ScrollView
-
At this time, I found that when I drag the ScrollView box, the Box is also dragged at the same time, and the drag response of the ScrollView is very insensitive.
-
The next thing to realize is that when the ScrollView is dragged, the Box does not drag, and when other areas of the Box are dragged, the Box can still be dragged;
-
When running, remove the Selectable check, and the ScrollView can be dragged normally; if the ScrollRect check is removed, the drag will not be affected; in addition, LeanSelectByFinger has a Layers, the setting of the response layer. Use the combination of these 3 functions to achieve compatibility.
-
First remove the RaycastTarget tick of the Image on the two Boxes. At this time, the two Boxes cannot be dragged; when they are on the ScrollView, they can be dragged.
-
Under the Box layer, create a Drag, add some images inside, make the color transparent, and lay out in the area that can be dragged
-
Set ScrollView to a new Layer, which can be named CannotDrag
-
In LeanSelectByFinger, uncheck CannotDrag
At this point the function is complete, I wish you all the best~