I am trying to create a dashboard where users can drag and drop widgets within the dashboard to any position they'd like. I've seen other examples similar but they all seem to have predefined elements.
In my case, the user can create and remove elements on the dashboard and move them to any point on the board.
My question is, what would be the best way to create a dashboard like this that supports the dragging and dropping of an element anywhere on it. Also, how can I save this info?
Thanks in advance.
Are you looking for something like react-grid-layout?
In this demo you can see how the widgets' state could be encoded. This could be saved and retrieved upon page load.
You can use react-dnd library. Easy to implement and customise. Here is the repo link;
https://github.com/react-dnd/react-dnd/
Related
I've explored the docs, the code, and all of the questions/discussions I can find on this library but haven't found any discussion of whether this is possible.
Basically we want to only show the marker if the list contains some particular element-type as its direct child in the source HTML.
I'm aware of Custom Rendering but even with all of the information I've reviewed, I don't see any way to accomplish this.
Can this be done?
I really like the commenting interface employed by Medium, allowing users to highlight a portion of an article and comment on that specific part.
I would like to implement a similar commenting facility in a VueJS app.
I found this package which does something similar: http://aroc.github.io/side-comments-demo/, but I want to try to find something that has been updated more recently. Also, it requires jquery, which I don't currently use and I would like to avoid adding that dependency if possible.
I would love to know if anyone has seen anything that could help.
I have created a sample at https://codesandbox.io/s/medium-style-text-select-comment-box-h5o9r
Here I am adding the comments component to the root component such that it is available globally. On component mount() hook, I am attaching a mouseup method to the window object where any selections done are checked using
if (window.getSelection() && !window.getSelection().isCollapsed) {
//execute only with the getSelection() method is available
//and the current selection is not collapsed
}
Once we do have a selection, the position on the page is calculated using the selection position and its dimensions and the floating comments component is positioned accordingly.
We can get the selected text using
window.getSelection().toString();
I would advise you to go through the sandbox as there are a lot of things going on which are not in this answer.
Probably not the best title, also, that why I ask here, describing this to a human may help me, describing it on google won't. I tried searching but I couldn't find.
How can I display some info about the destination of a link when hovering over it? For example if the link is towards a forum post I want to display a summary of the contents of the post, or if it is towards a site, display the site logo, title, a summary of the page? etc.
That has nothing to do with Laravel... well, Laravel could provide you with that info but the interaction that you're describing should be achieved with JavaScript/CSS on hovering an element.
Mock up those elements with HTML/CSS first, how they would look, and then use JS (or a JS library) to make it dynamic on certain actions (i.e: hover).
Just use an html tooltip attribute. Should be all you need.
https://www.w3schools.com/css/css_tooltip.asp
Or if you need more complex elements just write js / jquery code for the class Onhover action
I am trying to implement a drag and drop list view item, where I can drag from a listview and drop into another.
The big problem I am facing is the "zIndex" from the ListView children, I can't figure out how to get the child row to stay above the other views when I move that
You Can find the code I made here: https://gist.github.com/zr0n/5f4f1ca6ca371e5a5264a4d2de1ae733
Please, save my day anyone
I solved this. I found an interesting workaround in this repository: https://github.com/deanmcpherson/react-native-drag-drop
It was hard to found, once it is not even a npm module.
It creates a transparent modal and clone the dragging content on it, so it stay above the other views. I needed to make a little fix to use it with TouchableOpacity/TouchableHighlight/TouchableWithoutFeedback and made a pull request:
https://github.com/deanmcpherson/react-native-drag-drop/pull/3/commits/dd16534b8d5d73ff2c95b92c2649c5a176b42986
If you need a Touchable Draggable and when you are reading this the PR was not approved, use my fork with branch Touchable_Children:
https://github.com/zr0n/react-native-drag-drop/tree/Touchable_Children
I'm trying to create a multi-leveled list that is sortable by drag and drop. The user can grab an element and move it up and down the tree or drop it into other elements and have it become a child.
Are there off the shelf JS solutions? The jQuery sortable/draggable worked fine for a single level list but less so on nested solutions.
You can also try https://github.com/dbushell/Nestable (demo: http://dbushell.github.io/Nestable/).
Works with mouse and touch and this plugin is compatible with jQuery and Zepto.
I am using johnny's jquery-sortable plugin, which can be found here http://johnny.github.io/jquery-sortable.
It seems to work pretty well.
I was also trying to get it to send back the sorted structure of the list via AJAX. See this topic if you want to see my working solution, as the official documentation on serialization seemed slightly unsatisfactory (at least for nested lists).
Hope this is helpful.
So while you can use https://github.com/dbushell/Nestable or http://johnny.github.io/jquery-sortable
You probably want to move to something like React these days so you can use packages like this: https://www.npmjs.com/package/react-drag-sortable
Try not to use jQuery for this sort of thing any more. By the time you have drag/drop interfaces you have the makings of a webapp, not a web page, and you're going the wrong direction.
I have came to see a package named react-nestable and it works to create nested drag and drop. I am putting a link for that package below - react-nestable npm