I'm build the UI for a web-based list app.
Does anyone know of a script that allows users to arrange the ordering of html elements?
similar to this
http://jqueryui.com/demos/sortable/ but also has the ability to indent items by dragging horizontally? (to represent parent child relationships)
I believe that the parent-child relationship you want creates a tree, so why not looking for some jQuery Tree plugins that allow drag and drop.
I found this after a quick search in google:
http://www.jstree.com/demo
There are several Tree plugins that do something similar to what you want.
Related
I am building a page builder tool using Vuejs 2.6.11 and Vuetify 2.3.10.
One of the concepts of this tool is that the elements can be dragged and dropped anywhere and can overlap each other.
Now, I want to give an extra feature to this drag-and-drop concept when elements are being dragged, alignments lines (basically an alignment ruler) should be displayed so the user can know the alignment between elements like this-
draw.io is an example to see this kind of feature in behavior.
I found many good libraries of drag-and-drop in vuejs but no one is providing the alignment lines or ruler when dragging the elements.
Libraries I looked into it-
https://www.dunebook.com/18-best-vue-drag-and-drop-libraries/
If anyone can suggest a suitable solution either a library or a custom way to implement this, would be a great help.
I am looking to implement a sortable (ordering) drag and drop between columns as well as in column. I looked all over internet to find any example that does not use a library for it. I'd love to implement it in VueJS, however, any examples are welcome.
It should basically function like JIRA, where you have TODO and IN PROGRESS columns for example, you can order them by priority in the column itself, or move it to another column.
The reason, why I do not want to use any library is because I want to build my own complex functionalities. I also do not wanna fork existing github libraries to modify them. I'd love any suggestions!
Doing a simple search with the following keywords: creating drag and drop feature "without" library javascript pure I was able to find this links:
Building drag and drop feature in react for react applications
Building drag and drop feature with pure javascript
Useful tip
If you don't know surrounding some keyword in a google search with quotes forces google to only show results with that word in specific
I have data that needs multiple columns. One of the columns (preferably not first, but can be) will display nested tree structure like data.
Both maxazan's TreeGrid.js and Ludo van den Boom's treetable.js accomplish what I want, almost. It can be very hard to distinguish the hierarchy by quick glance:
The data hierarchy is but unclear here
And here would be solution: Adding connectors ->
The visualisation fixed with connectors
The actual data has 7 columns
...but TreeGrid nor Treetable support this functionality. In both, the indentation is accomplished through spans with padding. Treetable uses a single spans, which makes connector implementation near impossible. TreeGrid uses multiple spans, where I could imitate something connector like to distinguish the levels better.
How would I implement connectors to eg. TreeGrid, or are there any similar js libraries for creating tree grids with connectors that I have missed?
If your answer is: "it's semantically incorrect, you should use nested lists" (in which connectors are quite trivial to implement), then my follow-up question is:
What are the different possibilities to vertically align the elements inside list elements inside nested unordered lists? The old version used unordered lists with floating elements, very fiddly code to resize them accordingly if window is resized etc, which broke in way too many cases and was horrible to maintain.
Is it possible to draw a graph in an HTML file using the jOrgChart jQuery plugin, as in the example below?
If that's not possible then what are other options are available for drawing such chart, without using Drupal?
Assuming that this question is about the jOrgChart jQuery plugin, and assuming that Drupal is an option to consider, then for sure it's worth considering the jOrgChart sandbox ... at least that's where I'll start from if some day I want to start using jOrgChart in Drupal.
For other Drupal based alternatives for charting, checkout the Comparison of charting modules I created (note to myself: add this jOrgChart plugin and sandbox project to that comparison).
Curious to hear to what extend this attempt is an answer to this charting question ...
PS: Checkout my profile for more details about my charting background, etc.
Very easy to use given a nested unordered list element.
Drag-and-drop functionality allows reordering of the tree and
underlying structure.
Showing/hiding a particular branch of the tree by clicking on the
respective node.
Nodes can contain any amount of HTML except and . Easy to
style.
You can specify that sub-trees should start collapsed, which is
useful for very large trees
for html
https://dl.dropboxusercontent.com/u/4151695/html/jOrgChart/example/example.html
I would like to know about the available js libraries for drawing multilevel trees. Some functionalities I'd like to add to the created tree would be to make the nodes click-able and to be able to select an area on the graph and do actions based on the selection.
Maybe you should try arbor.js?
I'd check out Protovis. I've had good success with it. However, it is a very general library, giving you lots of building blocks to make nice graphs, but it won't be a turnkey solution.