I am trying to create drag and drop dashboard, and I came upon a great nested list on: http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested
This is done with AngularJs javascript framework. Since I am not experienced with it, can anyone please point me in the right direction.
As you can see, the demo version has Dropzone A, and Dropzone B, and those zones are not draggable. What I want to do is make this Dropzone draggable between themselves, so it can be reordered. So the Dropzone B comes first and vice versa. Did someone try this already?
you can use angular-ui-tree to implement this, link, examples
Related
I've been looking for solution with nested lists for several days. I've tried react-dnd, but when it comes to nesting - it becomes difficult to implement.
So I've finally found sandbox with react-sortable and created this example:
https://codesandbox.io/s/sparkling-wave-krip2t?file=/src/styles.css
it works but that's hard to drag the item inside another item, because it doesn't has highlighting zone and you need just keep trying to drop it inside until it finally happens.
Maybe you can give me an advice how to implement this feature?
I'm working on with a working model like this:
So here, the left side is a simple list which containse list items.
1. This is not droppable, draggable only
2. After drag, this list remains same all the time.
On the right side, the dragged item will be dropped here.
Once the user dragged an item from left side, the other side/ right side should indicate a placeholders to user where they can drop.
All the dropped items on the right side can be swappable within right side.
Right side area should contain like bootstrap row, column functionality.
I have to achieve something similar to this https://react-email-editor-demo.netlify.com/
Already, I gone through fre react plugins like react dnd and react -beautiful-dnd. I don't get an idea like whether above points are achievable by using these two plugins.
After searched many things,In react-beautiful-dnd, we can't add custom placeholders.
Any help on this, would be grateful.
Here I created for you a small example that tries to replicate the drag in a placeholder behavior from the link you shared above.
Keep in mind that you have total freedom to create how many droppable targets as you want and make them accept different types of items, based on what you specify in accept array of useDrop hook.
I hope it helps.
React DND is the most popular library. However, it is not impossible to implement your own. Please, have a look on this answer.
I'm not sure about the placeholder suggestion bit but Dragula JS is a quite easy library to use for drag and drop features. You can check it on github and see the demos there too.
https://github.com/bevacqua/dragula
Demo page - https://bevacqua.github.io/dragula
Hope this helps.
I'm currently trying to rewrite a desktop app to something that can be run in a browser. I have (more or less) the idea how to rewrite most of the features, but there's one in particular that I'm not sure how to tackle.
So the app does have text fields (hundreds of them). You can click any of them and type some data. It's all fine till now, but next thing is, you can drag and drop to swap them (or content of them) with each other.
On desktop drag and drop is done with right mouse button, but I'm not sure if that's feasible for web. I was also looking up some drag and drop libraries, but they all seems to handle more "static" elements like divs, images, etc, but never input fields (maybe because they're stealing click events?).
Does anyone in here have a clever idea how to achieve something like this? Maybe someone else have done something similar or maybe it would be easier to do if XYZ? Ideally in React (because that's what I'm using for rest of the app), but if it's work in any other way maybe I'll be able to adopt it.
Thanks for any suggestions in advance.
I use https://github.com/atlassian/react-beautiful-dnd
The main idea is using Draggable and Droppable components. Also, it's possible to handle both clicks and drag events. But it's complex a bit.
I want to create a iGoogle kind of layout in which you can drag and drop different widgets in different places. I have to use javascript or jquery only. I wanted to know how to go about it. Basically how to start and implement this kind of structure.
P.S.: I cant use any specific framework which does this job. I have to create it myself.
You can also use draggable and droppable jquery plugins. See example here
http://jqueryui.com/droppable/#revert
update
You have to write your own dragable function. The trick is you listen to onmousedown event and then redraw the element at current x, y postion.
Look at this example
Note : if you want to learn, then do not copy paste the example. Try to understand and then implement on your own !
Check out jQuery UI's Sortable interaction functionality, should give you a good starting point.
http://jqueryui.com/sortable/#display-grid
I am working in making an app around the 960.gs based system (although the grid framework isn't set in store yet).
What I would like to do is enable the user to drag and drop specific layout elements (DIVs), which would, theoretically, move the blocks of the design around. I know JQuery UI has a drag and drop system, which may be a component of this project, but what I want to do is make sure that the user can only drag, drop and stretch/expand divs according to the limitations of the defined css grid. And make sure that nothing will violate the boundaries of the grid, and generate the proper css classes to display correctly....
I have scoured the net and stack exchange for some examples along this line, but I haven't seen anything. Can someone point me in the right direction?
I'm looking into a similar problem, and I found a few options that are not based on 960.gs.
jQuery EasyUI (www.jeasyui.com/) has something like this; here is a direct link to their demo.
There's also iNettuts, which is something similar.
Since you said the grid framework choice isn't solid, I think these options might be useful.