I am setting up a drag and drop interface using jquery and jquery-ui. I've got element snapping working, which is nice, but now I'm trying to get elements to snap at a distance, using some sort of automatic temporary guide rulers.
A very good implementation is on the mac version of Powerpoint. Here's a screenshot of a drag in progress:
Is there some sort of jQuery plugin that exists for this? If there isn't a plugin, is there some easy way to draw lines that would be snap-able? Is there algorithm for dealing with calculating points and working out which lines to create?
You could always copy/paste the snap-part of the draggable.js and change some css values. That would be the easiest way to implement it, since the base is already written in jquery-ui.
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.
Here's a weird one that I've been wracking my brain on.
I want to do two things, in order:
Generate a masonry-style layout from a list of divs, imgs, or whatever. These will utilize images but they can be background images, within the divs, or some other method that works. This can be pure CSS or a jquery plugin.
Once the grid has been generated, apply a physics based plugin like '.throwable' to the individual divs/objects. The objects will fall on each other, but overall retain their structure, much like you'd see in Angry Birds or something.
The goal here is to paste in a list of divs, let a jquery plugin or even pure CSS automatically figure out how to align them, and then apply gravity to the masonry grid.
The problem I've run into over and over is that the masonry grid is generated... but then when I apply a physics system to it, the individual objects snap back to a different position. I think masonry wants them as "relative" while the physics system wants them in "absolute"? Not sure...
I have a rough version of my latest attempt up here if anyone wants to get an idea of what I'm attempting: http://cssdeck.com/labs/full/f5dm0zv8
Jasper's reply hinted at the solution, although I'm not sure why things seemed to work this time for me. I had tried multiple javascript/jquery based masonry plugins, and nothing had worked. I ended up trying "http://masonry.desandro.com/methods.html" and it ended up working for me. I thought I had tried this one already - maybe not? Anyways, I have a more or less working example here, but new issues have arisen: http://output.jsbin.com/runewidapi/2/
I am trying to make a webpage, where I want to plot points with which I can associate Mouse events (Jquery).
So, I guess I want them to be dom objects and not want to just paint them. (Please suggest if we can paint using html5 and still treat them as dom elements)
So essentially I have a text files with x,y co-ordinates and I want to plot those but want to associate Jquery events with them. for example: on left clicking them a graph appears or right clicking them a menu appears depending on which node I clicked.
Imho, it would be a very silly approach, to write DOM elements with lines and dots.. For instance, how would you make a round line - you could create diagonal lines with border CSS styling but.. Well - there are many options available! Another approach could be Highslide.
jqueryui-visualize
jQuery top5 graphing tools
http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/
Demo
Dojo Toolkit
Since you for some reason have tagged this with dojo, check out this blog entry;
http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/
2dChart Demo
Read about Scrolling / Zooming here
Zoom Demo
Here's a nice little introduction slideshow from an apache user
Well, several approaches.
You can take your coords and create absolute positioned elements on the DOM using those points. Using jQuery you can set 'top' and 'left' points to position them. This method may be easiest for you because jQuery can easily apply click events.
You can use the HTML5 canvas and draw shapes onto it using the coords from your file. With this method you would either need to write your own event library or use libraries already written such as kinetic.js. Also styling these is going to be a bit less dynamic and extensive than using DOM objects and CSS as with the first method.
I want to have dynamic ajax plugin to show a speedmeter on the page.
One Idea is that I set a background and rotate the needle.
Anyone knows about a related plugin?
Here are some for your reference
http://bernii.github.com/gauge.js/
https://github.com/vjt/canvas-speedometer
And lots of more at Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed)
I've been testing G+ for a little while and i find the friends drag and drop into circle thing has a verry good effect (don't you think ?)
I was wondering how to achieve a similar effect when drag & dropping user into a circle using jQuery. It may give me a starting point in order to achieve this for a tree or a square. :)
Thanks
An opensource example of this is Circle Hack or Facebook Circles, source: https://github.com/voloko/facebook-circles
Which could be customized for your needs (unsure about licensing though)
It uses UKI.
If you want to achieve the same effect using jQuery I recommend using jQuery UI
You should try this http://www.9lessons.info/2011/09/google-plus-style-drag-and-drop-adding.html