Using Javascript, I would like to reposition an object using a event drag.
Is tracking the distance the mouse moved the only way of getting the location of the object before drop?
In this example, there is not "drop location" as I will simply be updating the object's location based on where the user drags the mouse.
Thanks!
Cross Browser compatibility is an issue so the code is kind of funky. This code should work on any Browser.
This is based on the mouseup event.You could use the mousemove event instead.
If the event listener is added to the window, it will not work in IE8 and prior.
<!DOCTYPE html><html lang="en"><head><title>Floor Plan</title>
<style type="text/css">
#page{width:100%;padding:0;}
</style>
<body><div id="page" onmouseup="fpos(event)">
</div></body></html>
EOT;
ob_flush();
echo <<<EOT
<script type="text/javascript">//<![CDATA[
var fp = document.getElementById('fp');
var ptr = document.getElementById('point');
function fpos(e) {
var x = 0;
var y = 0;
e = e || window.event;
if (e.pageX || e.pageY){
x = e.pageX;
y = e.pageY;
}
else if (e.clientX || e.clientY) {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
var offSet = findPos(fp);
x -= offSet[0];
y -= offSet[1];
find(x,y);
}
function findPos(obj) {
var currentLeft = currentTop = 0;
if (obj.offsetParent) {
do {
currentLeft += obj.offsetLeft;
currentTop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [currentLeft,currentTop];
}}
Related
<script type="text/javascript">
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMousePos;
// Temporary variables to hold mouse x-y pos.s
var tempX = 30;
var tempY = 30;
function getMousePos(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch/correct negative values
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
// show the position values in the form
document.MouseDisplay.MouseX.value = tempX;
document.MouseDisplay.MouseY.value = tempY;
return true;
}
// execute function
if (tempY < 30) {
alert('tempY is found to be less than 30');
}
</script>
I found this code at hotscript and codelifter http://www.codelifter.com/main/javascript/capturemouseposition1.html, it was from an old thread but I believe it's got what I need to achieve. I want to execute a function whenever the mouse Y position is less than 30.
I'm a beginner at programming, hope that I can slowly learn from samples here.
My question is, why is the alert command not triggered? What am I missing here. I did a simple button to call the function it works tho.
<script type="text/javascript">
function myFunction() {
alert('tempY is found to be less than 30');
}
</script>
Haven't tried your code but assuming it does work when the mouse moves, to see your alert just move that line inside the function :
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMousePos;
// Temporary variables to hold mouse x-y pos.s
var tempX = 30;
var tempY = 30;
function getMousePos(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch/correct negative values
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
// show the position values in the form
document.MouseDisplay.MouseX.value = tempX;
document.MouseDisplay.MouseY.value = tempY;
// execute function
if (tempY < 30) {
alert('tempY is found to be less than 30');
}
return true;
}
I am developing a web page where I have set an image in a <div> dynamically.
It works in Firefox but it fails in IE.
The question is: how to get mouse pointer position in IE?
I am using the following code for getting mouse pointer position:
function getCursorXY(e) {
CurX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
It works fine with Firefox.
Try this, This should work on all browsers including IE.
<html>
<body>
<form name="Show">
<input type="text" name="MouseX" value="0" size="4"> X<br>
<input type="text" name="MouseY" value="0" size="4"> Y<br>
</form>
<script language="JavaScript1.2">
<!--
// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false
// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)
// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;
// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0
// Main function to retrieve mouse x-y pos.s
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
document.Show.MouseX.value = tempX
document.Show.MouseY.value = tempY
return true
}
//-->
</script>
</body>
</html>
Use jQuery and use event.pageX and event.pageY!
See http://api.jquery.com/event.pageY/
I solved this problem with this code
var CurX;
var CurY;
var IE = document.all?true:false;
if(IE){
CurX = window.event.clientX;
CurY = window.event.clientY;
}
else{
if (window.captureEvents) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = getCursorXY;
}
function getCursorXY(e) {
CurX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
Use: clientX and clientY
Like this code:
var posx = 0;
var posy = 0;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
Icefaces has a method for positioning a popup WHERE you click the mouse. I disabled the portion of the code where the coordinates of the mouse click are taken because I want to put this menuPopup at the position where my targComp (which is actually a div) is located (so fixed location iso mouse location).
The javascript method called is:
function contextMenuPopup(event, popupMenu, targComp) {
var dynamic = $(popupMenu + "_dynamic");
if (!event) {
event = window.event;
}
if (event) {
event.returnValue = false;
event.cancelBubble = true;
if (event.stopPropagation) {
event.stopPropagation();
}
var posx = 0; // Mouse position relative to
var posy = 0; // the document
/*
* if (event.pageX || event.pageY) { posx = event.pageX; posy =
* event.pageY; } else if (event.clientX || event.clientY) { posx =
* event.clientX + document.body.scrollLeft +
* document.documentElement.scrollLeft; posy = event.clientY +
* document.body.scrollTop + document.documentElement.scrollTop; }
*/
alert(Left(targComp));
Ice.Menu.showIt(posX, posY, popupMenu, targComp);
}
}
You see that I only commented old code and add an alert to find out if my methods which return the position of the targComp are correctly calculating the value.
function Left( el ) {
var _x = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_x += el.offsetLeft - el.scrollLeft;
el = el.parentNode;
}
return _x;
}
function Top( el ) {
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_y += el.offsetTop - el.scrollTop;
el = el.parentNode;
}
return _y;
}
I do not understand why my alert return 0 when I surely know that my targComp div is not at that left coordinate...
Do you see any problem? (yeah, I know I have to replace the posX and posY at the showIt method, but I'll do that after I am sure that Left and Top are correct (which by the way are copied from here so already confirmed that these methods are working fine...)
Then where it's the problem?
Html code:
<div class="icePnlGrp graMainMenuTabDefault" id="frmMainMenu:divMenuPopupAP" onmouseover="contextMenuPopup(event, 'frmMainMenu:menuPopupAP_sub', 'frmMainMenu:divMenuPopupAPSmall');return false;">
<label class="iceOutLbl graMainMenuTabText" id="frmMainMenu:j_id54">Application Portfolio</label>
<div class="icePnlGrp" id="frmMainMenu:divMenuPopupAPSmall" style="border-style:solid; border-width:1px;">
</div>
</div>
Update (after solving the above problem): I attach a screenshot wondering why the mouse position is calculated correctly when I press click inside that targetComp div but the position of the div is wrong...?
Update solved: seems that I do need targCompObject.offsetLeft, targCompObject.offsetTop,
instead of calliny those Top and Left functions.
where
targCompObject = document.getElementById(targComp);
So the final call is:
Ice.Menu.showIt(targCompObject.offsetLeft, targCompObject.offsetTop,
popupMenu, targComp);
You're passing in the id of the target element, not the element itself.
Somewhere in the popup handler you need
targComp = document.getElementById(targComp);
You could make it check first to see whether it's a string, so that you could optionally call it with a DOM element reference too.
This question already has answers here:
How to get mouse position in jQuery without mouse-events?
(7 answers)
Closed 3 years ago.
In Javascript, within the Javascript event handler for onMouseMove how do I get the mouse position in x, y coordinates relative to the top of the page?
if you can use jQuery, then this will help:
<div id="divA" style="width:100px;height:100px;clear:both;"></div>
<span></span><span></span>
<script>
$("#divA").mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
});
</script>
here is pure javascript only example:
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
document.Show.MouseX.value = tempX;//MouseX is textbox
document.Show.MouseY.value = tempY;//MouseY is textbox
return true;
}
This is tried and works in all browsers:
function getMousePos(e) {
return {x:e.clientX,y:e.clientY};
}
Now you can use it in an event like this:
document.onmousemove=function(e) {
var mousecoords = getMousePos(e);
alert(mousecoords.x);alert(mousecoords.y);
};
NOTE: The above function will return the mouse co-ordinates relative to the viewport, which is not affected by scroll. If you want to get co-ordinates including scroll, then use the below function.
function getMousePos(e) {
return {
x: e.clientX + document.body.scrollLeft,
y: e.clientY + document.body.scrollTop
};
}
It might be a bit overkill to use d3.js just for finding mouse coordinates, but they have a very useful function called d3.mouse(*container*). Below is an example of doing what you want to do:
var coordinates = [0,0];
d3.select('html') // Selects the 'html' element
.on('mousemove', function()
{
coordinates = d3.mouse(this); // Gets the mouse coordinates with respect to
// the top of the page (because I selected
// 'html')
});
In the above case, the x-coordinate would be coordinates[0], and the y-coordinate would be coordinates[1]. This is extremely handy, because you can get the mouse coordinates with respect to any container you want to by exchanging 'html' with the tag (e.g. 'body'), class name (e.g. '.class_name'), or id (e.g. '#element_id').
Especially with mousemove events, that fire fast and furious, its good to pare down the handlers before you use them-
var whereAt= (function(){
if(window.pageXOffset!= undefined){
return function(ev){
return [ev.clientX+window.pageXOffset,
ev.clientY+window.pageYOffset];
}
}
else return function(){
var ev= window.event,
d= document.documentElement, b= document.body;
return [ev.clientX+d.scrollLeft+ b.scrollLeft,
ev.clientY+d.scrollTop+ b.scrollTop];
}
})()
document.ondblclick=function(e){alert(whereAt(e))};
I've found this snippet on Ajaxian, but I can't seem to use the cursor.y (or cursor.x) as a variable and when the function is called as such it does not seem to work. Is there a syntax problem or something else?
function getPosition(e) {
e = e || window.event;
var cursor = {x:0, y:0};
if (e.pageX || e.pageY) {
cursor.x = e.pageX;
cursor.y = e.pageY;
}
else {
cursor.x = e.clientX +
(document.documentElement.scrollLeft ||
document.body.scrollLeft) -
document.documentElement.clientLeft;
cursor.y = e.clientY +
(document.documentElement.scrollTop ||
document.body.scrollTop) -
document.documentElement.clientTop;
}
return cursor;
}
I'd preffer not to use jQuery UI if possible, since I've always thaught of jQuery and librarys as a bit of an overkill for most JS programing.
This has always been difficult to achieve cross-browser, but this is about as good as you can get...
<!DOCTYPE html>
<html>
<head>
<title>Javascript Test</title>
<script type="text/javascript">
window.onload = function() {
document.onmousemove = function(e) {
if(!e) e = window.event;
if(e.pageX == null && e.clientX != null) {
var doc = document.documentElement, body = document.body;
e.pageX = e.clientX
+ (doc && doc.scrollLeft || body && body.scrollLeft || 0)
- (doc.clientLeft || 0);
e.pageY = e.clientY
+ (doc && doc.scrollTop || body && body.scrollTop || 0)
- (doc.clientTop || 0);
}
document.getElementById("pos").innerHTML = e.pageX + ", " + e.pageY;
}
}
</script>
</head>
<body>
<h1>Position: <span id="pos">0, 0</span></h1>
</body>
</html>
This snippet must be called inside a mouse event handler, with the event object from the handler.
//edit//Just in case I misunderstood you can not set the mouse's physical position in javascript.
So I found an answer kind of on here so I shall Simply Link to it for study purposes. Show mouse x and y position with javascript
Edited----Wanted to share what worked for me.
This is a form of the code I found at above link I changed slightly. It seems as though I must put certain things to window.onload.
window.onload = function () {
IE = (navigator.appName == "Microsoft Internet Explorer") ? true : false;
if (!IE) {
document.captureEvents(Event.MOUSEMOVE);
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousemove = function (e) {mousePos(e);};
document.onmousedown = function (e) {mouseClicked();};
};
var mouseClick;
var keyClicked;
var mouseX = 0;
var mouseY = 0;
function mousePos (e) {
if (!IE) {
mouseX = e.pageX;
mouseY = e.pageY;
}else{
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
}
return true;
}