I'm trying to build an interactive map and I'm looking for information on how to have a click and drag in one window, affect an image in its parent window.
As this is hard to explain if you visit http://liamg.co.uk/map/map.html you will see a small window/map in the top left, Id like to be able to drag a small window around the map and have that move the larger/zoomed in image, does this make sense?
Any information/help is greatly appreciated!
jquery supports drag n drop elements, see here: http://jqueryui.com/demos/draggable/
you have to set the right boundaries, and then add an event that performs on drop in which you will read the position of the dropped element and can then apply it to the map however you want to.
The right example you want is this: http://jqueryui.com/demos/draggable/constrain-movement.html
The first one in the box has the boundaries of the box.
And here you see how to react on the drop: http://jqueryui.com/demos/draggable/events.html
I think what you need is not exactly a drag event, you want a element moving only inside the little map, yeah?
Let me explain:
1- Add a listener to mouse down, up and move to that little map;
2- When flag mousedown is true, mousemove works changing a position of a square div around the little map (showing what portion of image the user is seeing). Use pageX and Y (coordinates);
3- Make the math by size of the portion div and size of the big overflowed with the full map to show the exactly zoomed portion of the map.
I belive drag is really implemented when your move a think around all the document, or using the drop event. But it's what I think.
Related
I am trying to create a drag and drop application when I can drop a marker on an image. While this is an Angular app I am using plain old JS API for the drag and drop do to issues with CDK.
I am able to move a 20x20 div around the image and drop it and set the location on the image by setting the top/left style of the div. However, the problem I am having is that the offset[XY] is the point of the mouse down. So if I grab the upper left corning my div lands where I expect. If I grab the div in the middle, then it is off by the drag point offset.
How can I correct for this offset of the draggable? Or is there a better solution?
One of my coworkers came up with a great solution. Subscribe to the mousedown event to find the offset and then do the math.
I am trying to display a heatmap of where the user moved their mouse on a screen (using a Chrome extension). I'm using a library called heatmap.js to handle this.
More specifically, I am using this as an example -- https://www.patrick-wied.at/static/heatmapjs/example-mousemove-heatmap.html
My problem is that the site I wish to display this heatmap on is making heavy use of z-index. The issue with this is that when you mouseover an element with a z-index other then auto, the value returned by onmousemove is not what one would expect -- instead of the value of the mouse on the screen, some other value relative to the top left of the screen is returned.
You can see this in action here -- https://jsfiddle.net/rj870o6c/
To counteract this, I tried adding an overlay div on top of the entire page with a z-index of 9999. This works, but then I lose the ability to interact with the page below, and of course, I can not use pointer-events: none; since I need to capture the value of the mouse.
You can see this in action here (try clicking the link in the yellow box, it won't work) -- https://jsfiddle.net/ktwbbpbn/
Is there a way to get the real value of the mouse pointer when hovering over elements that have a z-index?
Any help would be greatly appreciated.
So it turns out that the issue was that I was using layerX and layerY for grabbing the position of the mouse. That's a bad idea for my use case because that only returns data relative to the current layer (https://developer.mozilla.org/en/docs/Web/API/UIEvent/layerX). The answer is to use pageX and pageY instead. See this for more info.
For anyone who might find this useful, here's a JSFiddle with everything working as expected -- https://jsfiddle.net/h1us1syr/
My question relates to a excellent javascript library called packery which I am using to create a masonry style layout. I am also using a sister script called draggabilly to allow the user to drag and drop (reorder) the items in the page. Currently I am doing something fairly similar to conventional usage:
http://codepen.io/desandro/pen/CKbkw
When you drag an item the interface leaves a space large enough for the element to be dropped. I wanted to place a div there temporarily to indicate that this is where the element will be dropped. All I really need is a way to get the x, y co-ordinates for where the dragged element will come to rest once released but I can't seem to figure out how to get that information.
and I am using a dragMove listener which is where I expect to display my div and provide it with the correct co-ordinates:
draggie.on( 'dragMove', function(draggieInstance, event, pointer) {
//code to display and position ghost div
});
Any assistance would be much appreciated.
I am developing a magnifying glass and I was hoping I could get some help figuring out how I am going to do a step.
What I am doing is I have a div with a higher z-index than the content. It is moveable and draggable. It also has a transparent background so one can see the content (images & text) behind/underneath it that has a lesser z-index.
Now the part that I need help with is this:
I want to figure out exactly what content is behind the div (let's give it an ID of #glass).
Then my plan was to append a <span> before and a closing one after and style it with CSS3 scale transforms to increase the size so it acts as if it is magnified.
If you have a better idea on how to 'magnify' the content please share it.
So what I am looking to do in a spot of pseudo-code is:
Get position of #glass.
Get content behind #glass.
Store that in a variable or give it a class or something to refer it to.
Append a span before and after.
Style it with scale-transform.
Undo and reset the above when #glass moves.
I would really appreciate any and all help with any of these steps, but especially number 2 and 3, As I have no idea on how to do those.
You can listen for the mousemove event on every element in the page. each time the event fires you update a variable with the latest node being hovered over.
So as you are dragging around the glass, the mousemove event should be getting fired on the elements behind the glass (since you are hovering over them). And you can then use your latest node variable to get the element behind it.
Here a is Jsfiddle demonstrating how this could be done:
http://jsfiddle.net/wWVuy/
I am utilizing jQuery's draggable functionality. The viewport div is the entire window size. There is a draggable container div within the viewport which is much larger than the viewport itself giving the feel of looking through a window to see small portions of the container. The container holds object divs which are also draggable.
Currently, I have the container div dragging properly and I have the object divs dragging around the viewport div properly as well. The issue I am having is I want to "push" the viewport around if an object div comes within a particular pixel range of the edge of the viewport div.
JQuery's draggable function has a drag event which I have been trying to utilize on the objects. I can get the viewport to scroll but, it requires the mouse keep the object moving at all times to keep the scroll going. I am looking to have the object get within the pixel range and be able to not move the mouse but, still scroll. I am at a loss at the moment as I cannot seem to find any solution that really fits my requirements. Any help would be greatly appreciated and rewarded with my gratitude.
To see an example of what I am doing, please visit http://jsfiddle.net/trVZA/10/. When the red box is dragged, the black object will drag around. I have commented out my code on the drag event for the object as it will completely freeze the browser but, it is there for you to see my mistake. When the object gets close to a wall I want the background water image to scroll around.