This is my first time posting, and I wouldn't be posting if I hadn't researched for hours how to do this.
I want to drag and drop an item onto a div that triggers a click on the location where it was dropped. I got the part where it drags and whatnot, but am unable to trigger a click (simulated).
Please let me know if you can help! I'd love some peace of mind lol.
<3 Lara
Call a function when the item is dropped:
<div ondrop="dropFunction(event)"></div>
In that function, you need to collect the mouse coordinates:
var x = event.clientX; // Get the horizontal coordinate
var y = event.clientY; // Get the vertical coordinate
And then trigger a click at those coordinates:
document.elementFromPoint(x, y).click();
The mouse coordinates created above are for where the cursor is on the screen. You may want to adjust these coordinates based on the shape of the object being dropped.
Related
I know you can get the mouse coordinates within a browser window with for instance:
$(document).bind('mousemove',function(event) {
X = event.pageX;
Y = event.pageY;
console.log(X+':'+Y);
})
This works in most cases but I currently have a case in which I can not use this.
I would like to also capture the mouse coordinates when a list of options in a select box is opened.
It appears that the 'normal' way of capturing the coordinates is terminated until the select box is closed again.
Is there a way to capture it?
I have built a control to select colors from a color wheel with independent sliders for hue saturation and brightness. I want to use two of them side by side, the formatting leads me to want to put these canvas objects in a table. Now, when I to localize the clicks, the canvas offset values (canvas.offsetLeft and canvas.offsetTop are not 0 so the clicks are located far to far to the right and bottom from where they are). Has anyone figured out how to localize a mouse click from a canvas while in a TABLE. It works fine otherwise.
Sorry to bother you, I have figured an answer by passing the offsets from the table objects to the object handling the mouse events.
Get a reference to the desired canvas element:
var canvas=document.getElementById("myCanvas");
And then use getBoundingClientRect to give you the left and top coordinates of the canvas
var BB=canvas.getBoundingClientRect();
var offsetX=BB.left;
var offsetY=BB.top;
I am trying to get the x and y of an html button to that of a mouseclick by the user, I am doing this as follows:
function buttonPressed(event, id){
var mainEvent = event ? event : window.event;
var mousex=event.clientX;
var mousey=mainEvent.screenY;
var y= $('#'+id).position();
var x= document.getElementById(id).offsetLeft;
console.log(y);
console.log(mousey);
This shows 2 different ways to get these value of both the button and the mouse (event.clientX,mainEvent.screenY,$('#'+id).position()(uses jquery),and offsetLeft).
However none of these techniques seem to work as I would like them to as the values do not line up ie when I click on the top left of the button the values are not the same or even similar. Additionally it seems like the difference changes, for example: if I have a button top left and one top right on the top left the values may differ by 100, whereas the bottom they will differ by -100. How can I acheive what I am wanting (to be able to compare the mousex and the button x)?
client X/Y Mouse pointer X/Y coordinate relative to window
offset X/Y Mouse pointer X/Y coordinate relative to element that fired the event
screen X/Y Relative to the top left of the physical screen/monitor
Thats why you are getting difference here
var mousex=event.clientX;
var mousey=mainEvent.screenY;
Use clientX for both
This is what I need in KineticJS:
I have a large 300x300 image, I want to be able to drag it, but only if I click-drag in the upper quarter of the image. if I try to drag the rest of this image, I don't want it to move. Is this possible?
Furthermore, If I try to drag this image, how can I make it drag the rest of the items in the group along with it?
the easiest thing to do would be to create a custom hit region function that defines a rectangular region in the top right corner of the image. Here's an example:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-custom-hit-function-tutorial/
See here: http://jsfiddle.net/NnD5q/
box.on('mousedown', function(e){
var bX = box.attrs.x, bY = box.attrs.y;
// set draggable false if they aren't in our click range
// (a 20x20 square in the top left)
if (e.x > bX + 20 || e.y > bY + 20)
box.setDraggable(false);
});
window.onmouseup = function(e){
box.setDraggable(true); // set draggable true on **window** mouseup.
};
Another option would be to create a drag handle object, group.setDraggable(true) on mousedown for that drag handle, then group.setDraggable(false) on window mouseup. This second option is likely much cleaner.
I'm designing user controls and I'm trying to code the controls for the mouse. This is what I came up with to get user input.
var mouseInput = new GLGE.MouseInput(window);
window.onmousemove = function(ev){
var dx = window.mouseX - prevMousePos.x;
var dy = window.mouseY - prevMousePos.y;
prevMousePos ={
x:window.mouseX,
y:window.mouseY
};
// I do movement calculations with dx and dy here
}
However what I came up with above isn't perfect because if the mouse reaches the end of the window it would not detect movement.
Is there a better way of detecting mouse movement? I'd rather not calculate it using its co-ordinates because using that method I'm unable to calculate distance moved when the mouse is at the edge of the screen.
PS: If anyone was wondering, what I'm designing is sorta like Google Streetview or a first person shooter. I just want the user to be able to move the mouse in one direction infinitely.
I mean, you're already using an onmuseover event handler (the most efficient way because Javascript is async). So you just compute distances from he previous, only when the user moves the mouse. If he doesn't further move the muse, the player just proceeds in the same direction prviously computed.
No, there is no method to handle mouse movements outside of the browser window.