Hi :) I'm wondering how to define a certain View as a dropzone or how to create on hover reaction of View while dragging over.
The only solution that I found was to define the dropzone as a static area with respect to global coordinates of the screen. The Problem is that in my case I need to drop the element on one of the many dropzones Views inside a ScrollableView.
It would be also nice to fire an event on a Dropzone View during PanResponder Drag Gesture over this View. Thanks!
Related
i'm on nuxt 2.13 , vuetify 2, vuedraggable 2.24 .
i wanna drag from a list of events and drop it on my layout structure. but here are the issues:
1- my layouts are different like the picture bellow. first i choose the layout and then drop my events inside it.
2- when i drag my element to layout, i wanna detect where dropping it to highlight the border.
3- after drop not gonna show the element inside layout (nested) but instead send a request to backend and put the respond image and title inside it.
which methods , props and #event should i use for each part. for example in #2 how can i find out where i'm dropping to highlight the border of it?
My Layouts that i choose from for example:
Or
My actual drag & drop:
Note:
as i mentioned before, i'm not looking for someone to code for me. i just wanna know that is it possible with VueDraggable and what are the helper events and methods . thanks
I have two views, A and B.
I want to have the ability to trigger a 'dragAndDropStart' event on touching View A and then enable drag and drop from A to B... displaying feedback to the user throughout (i.e. showing a line appearing between View A and the user's finger). On drop (releasing the drag gesture) I want to trigger another 'dragAndDropEnd' event, this time on View B.
The touchStart and touchEnd handlers are too limited as they don't appear to permit handoff of the gesture from one View to another. They also don't seem to enable the in-between 'drag' state.
The React native docs on using the gesture handlers is a little cryptic and I haven't seen any examples that demonstrate their use.
Any ideas?
use PanResponder and Animated for drag&droup.
Read these articles, hope these will help you:
https://moduscreate.com/blog/animated_drag_and_drop_with_react_native/
https://blog.reactnativecoach.com/creating-draggable-component-with-react-native-132d30c27cb0
I created nested expandable view and when scrolling up or down user click on a view to expand it than that touch doesn't respond but once scroll gets it position. User can click and it will respond to expand it.
I can solved it by setting bounces property as false but i don't think it is a good way to handle this.
I have a component that response to gestures and another component smaller in size that's overlaying it (position: 'absolute').
Is there a way for the overlaying component to proxy gestures to the component under it or to a specific component?
Answering my own question: what you need is the 'pointerEvents' View property.
In my case, I had to set it to 'box-none' which means the View ignores gestures and forwards it on, but elements inside the view (like buttons) do get the events if clicked on.
https://facebook.github.io/react-native/docs/view.html#pointerevents
I need to figure out how in the world do I create object instances (an image) and place them on the screen and have it draggable. I know how to draw an image (png) onto the screen, but how do I make it draggable?
Create sublclasses of UIView where you override the touchesEnded method. Inside this method alter the coordinates of the view to match those of the most recent UITouch, and that will give you basic draggable views.