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
Related
I am using sectionList to create sections for my application. I have two tabs which uses the same section list. The issue that I am facing is that when I click the second tab the data refreshes but the other properties like scroll position doesn't because sectionList is a pure component. This causes the header of the second section to disappear after scrolling to some point because there are lesser headers. The things I tried but did not provide any results are:
Use extraData to indicate re-render required
Cloning entire data
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!
So QML StackView provides a way to navigate back by usin the pop() function. I am looking for a way to go the previous page by simply swiping to the right with UI elements following the fingers of the user (kind of like a SwipeView). How can I achieve this? I have looked around and all I found was this https://github.com/alejoasotelo/SwipePageStackWindow which is an old project that does a similar thing with the old PageStack.
One possible way to do this is to create a custom element called swiper that has a swipeview with 3 pages. 1 and 3 are blank but 2 has content. When page 1 is active, it allows all events to pass through unless a left swipe is detected. Page 2 has a loader So you can change the contents.
If you create two of these on top of each other you can move the one in front of the other whenever you need to switch views. Two loaders means the content will never consume too much memory.
So you'll have a variable isBottomActive
And one method
function pushNewView(view) <- this will move whichever swiper is not active to the front, put the view into it's loader and change currentIndex to 2.
Now if you need to go backwards you just swipe to the right. The swipers view index changes (you can tie a method here to make the old swipeview move back to the bottom with a different view as well)
so I didn't find something in the dijit Toolbar API I'll try it here.
Is it possible to place a dijit toolbar to another place than on top?
I'd like to create a Toolbar declarativly on the left side inside a contentpane so the toolbar is from top left, to bottom left.
Is there a way to do it?
Well if you go with declarative approach for widget creation, you can write custom css for each of them .
So getting a custom layout doesnt seem to be a tough task. You can write some div container's with a fix width , break line after each menu item and get the required layout.
check this for example:
https://jsfiddle.net/GfB2B/2/
I managed to find a sample code for Images as described in the following link .
How to drag images with pygtk
However when I use it for a button doesn't seem to work .
What the original link does:
It moves (pans) the image inside a 'Scrolled Window' widget. The widget doesn't change places, only the image with respect to the widget.
If you want to move the button itself, that is more complicated! It is easier if you use the 'fixed' layout manager, where the buttons are located in absolute coordinates (as opposed to the 'normal' layout manager where all widgets are 'packed' alongside each other. There you should use drag and drop. You have to prepare the entire application for 'receiving' the button, and what to do with it when it gets there. This involves many steps! ).
Have a look at the gtk.Fixed widget's documentation.