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.
Related
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 need to build a visual designer image or card designer that lets you add text boxes of text (multiple fonts), or images, drag them around, and resize them.
This seems rather simple but I would yet think common - but so far I haven't found anything I could use as a basis for this.
What I'm looking for is something like Keynote but super basic.
I've looked at:
remark.js: presentation only
reveal.js: Pretty close, but only the presentation engine is open source. The visual editor is a closed source service.
mxgraph / jgraph: designed for directed graphs or flowchart
gojs: designed for directed graphs or flowchart
contentbuilder: its a layout engine for a page with stacked layout modules, I need something that authors a card
Of course also staple javasript editors like ACE, CK and TinyMCE but they solve the font editing / font selection problem, but not the drag & drop boxes & layout issue.
What I'm trying to build is something you might use on tinyprints.com or minted when you design your card, or canva.com.
But my needs are really basic - so I'm thinking that possibly the reason there isn't a library for this is that its pretty easy to build it? Anyway, would love some input.
It's less of a layout editor/designer but Fabric JS has a lot of the features you are looking for (multiple fonts, dragging images around and resizing). It's Canvas-based but can export to JSON if you need to transfer to a non-raster format. Might be adaptable if this is still a need.
I'm a little bit depressed because I need a customizable grid (moving and resizing DIVs) like Gridster, you can check the demo here: http://gridster.net/
Basically I need all the features Gridster is offering, like dragging and dropping DIVs, resizing them and saving the positions of the DIVs and loading them.
However, there is one problem. It is not possible to drop the DIVs anywhere.
In the Screenshot I want to drop the red highlighted DIV on that place, but it will snap to the upper highlighted area.
http://fs1.directupload.net/images/150307/z2qlxelp.png
Is there any solution to fix this problem?
Also, could someone explain me how the Grid of Gridster works? Is there a "virtual grid" behind that or how is it realised?
If someone has a solution for that problem, an example would be really nice.
I'm not sure if gridster supports this but you can try gridstack.js with options {float: true}. I've started gridstack.js because I need responsive layout support. But now it has bunch of features which gridster doesn't have (like knockout.js support, etc).
The original Gridster.js project is abandoned. However, there is a well maintained fork that provides the functionality you need:
https://github.com/dsmorse/gridster.js
Take a look at the sticky-position code for an example.
Also, take a look at Angular Gridster:
https://github.com/ManifestWebDesign/angular-gridster
Sencha Touch seems like an amazing way to develop mobile apps. I've seen posts by people incorporating Jquery, D3.
At the same time the posts describing customizing controls seems to be fairly narrow.
Adding the picture of a kitten next to the slider and labeling the slider seems kinda tame compared to what ios can do in terms of custom controls, at least in terms of examples available. Most blog posts imply you can extend the control objects in Sencha or the CSS file.
These posts are not quite what I'm looking for - that's my problem. I can't see any examples of anyone changing default controls in Sencha touch, but they make it sound as if it might be possible to do anything.
This is my question:
Is Sencha Touch able to build an iOS or Android App incorporating any javascript library or HTML5? Are there any limitations here?
To give an example I trying to implement a custom slider, where a touch along a continuous line or a circle like this color selector will enter new values. Further if you incorporate a library like protovis or D3 (or Raphael charts) can Sencha display anything the graph canvas element will otherwise display? Will it take touch input and interact with the graph libraries the way that the HTML5 graph does?
The post you mentioned is not about customizing controls, it's about displaying a list from bound store, instead of of using just Ext.XTemplate (the system with Ext.view.View) to generate HTML, it uses ComponentView to generate Ext.Components instead.
It's hard to tell what you're asking, what in particular are you trying to do?
To address some of the questions you added:
Charts in Sencha are implemented using Raphael, which uses SVG, therefore all the elements in the chart can be interacted with using HTML events.
Everything that Sencha generates is valid HTML, you can listen to HTML events, but components usually abstract the lower level events into something that is easier to consume, (for example a data view abstracts the click so that it passes the record being clicked along with the event).
Therefore, the answer to the question is, YES, Sencha can co-exist with regular HTML. If you want the full benefit of the framework, you should always create an Ext.Component so that your components can be easily used within the framework's layout containers.
It's very easy to misuse Ext when trying to write regular HTML and still place that within the layout rendering pipeline. Ext.Component has a built in way of creating HTML out of templates, see http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-data and http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-tpl
I am currently building a widget that will allow users to design a layout for an application-specific task. And I would like to provide a powerpoint/keynote-esque interface (a la 280slides) for the users. However, I would also like to provide "snap guides" (sorry, I do not have any better words to describe them) which are basically guides taht help users align multiple elements on the page.
An example of this can be seen in the Flash IDE where, upon dragging the IDE automatically calculates the dimension and position of peripheral objects and attempts to align them. The mockingbird application (https://gomockingbird.com/mockingbird/) achieves something similar. (Hint: try dragging some objects and see how there are guides which attempt to align the object in their bounding boxes).
I believe a similar effect could be achived by caching an array of elements on the viewport and calculating the position and dimension of each element to find the best-fit snap. However, how do I calculate the most-probable position of the element being dragged? Are there any alternative solutions?
With someone with better knowledge, please enlighten me! :)
I suggest using a library that has already been written to accomplish this. For example, jQuery UI's Draggable does exactly this and is very customizable.