I was looking around for drag and drop functionality of tree listing items between two tree views (not in single tree), I found couple of them which actually does in single tree itself, however unable to find which does between two trees.
I search for it, and unable to find any free script for this, could you please point me to the right one ?
Thanks
Here is a good example with drag'n drop between two treeviews :
http://demos.kendoui.com/treeview/dragdrop.html
From KendoUI ;)
Edit: another one, more complex but free : http://www.jstree.com/documentation/dnd
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?
My project consists of VueJs 3 and vuedraggable.next.
So im trying to build a interface for managing questions that are organized into subjects an different topics. And moving and rearranging them separately seems to work. But im trying to figure out how I can move a question "into" another topic with drag and drop.
I found this 4 year old thread but without an accepted answer that I can work with. I have made this StackBlitz example to make it more understandable what im asking for.
I was thinking of adding my own, second layer, of draggable elements with the plain HTML drag and Drop API and somehow make the topics a "drop zone". With that approach I might grab the topic_id and subject_id, store that data, and remove the element from questions vue data list.
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 want to be able to display dynamic syntax trees on a webpage, possibly with a jQuery component. To show you what I mean, this
is a syntax tree, and this is the general way I want it to be displayed.
How do I build something like this with HTML and CSS?
edit: Solution
Just in case somebody who finds this question later is trying the same, here's what I did:
I ended up drawing the tree with Graphviz as an SVG, and then, moving the svg tree inside the DOM using some magic. That way I could still interact with the elements, e.g. drag&drop or hover/click events.
The result can be seen here.
Try d3, it has a really good tree visualization
Another option is ArborJs, you can find an introduction here
I'm looking for a Javascript UI component which will let me drag a line between items in a hierarchical tree on one side of the screen to items in a hierarchical tree on the other side of the screen (similar to BizTalk's "Map" UI).
I've searched for "Javascript Tree Map", etc. and have only found "Treemap"s... which are not at all what I'm looking for.
I'm perfectly fine with requiring HTML5 and using canvas.
I just don't want to write this myself if there is already something out there.
Thanks!
I'm not sure if I can articulate what I'm looking for well, so let me provide an illustration:
BizTalk Map UI http://geekswithblogs.net/images/geekswithblogs_net/Chilberto/WindowsLiveWriter/BizTalkMapComparisonbetweenTableLoopinga_B5B9/image_6.png
The WireIt library will enable you to drag lines that connect components. You may still need to pull in something else to get the hierarchical view on either side though.