PDA

View Full Version : Draggable Image Being Used as a Link



fbelzile
Oct 26th, 2009, 11:17 PM
Hi everyone,

I have some images that I want the user to be able to move around the page. So far, this script in the header allows me to do this:

var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{

if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}

}

function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";

while (fobj.tagName != topelement && fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}

if (fobj.className=="dragme")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;

return false;
}
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
The body has this:

<img src="images/balloons.gif" class="dragme">

Now, to be able to use this image as a link, I would have to find the displacement between the mousedown and mouseup coordinates. If the displacement is below say 10px, then the mouseup would bring them to another page.
I also wanted to make it so that if the mouseup occurs in a certain area of the page, that the image would move itself to a certain spot.
I've programmed a lot before, but not in JavaScript. Any help would be much appreciated. (Note: I need this done in JavaScript, not Flash, even though it might be easier).

Thanks

Old Pedant
Oct 27th, 2009, 01:43 AM
FWIW, I'm trying to do something quite similar. Except I wanted to use rightclick to activate the other action, rather than just detect that the mouse hadn't moved much when the button came up.

Anyway... You are already capturing the starting position--in your x and y variables--so all you have to do is compare the new x/y to them.

As for knowing where the image is "droppable": In my case, it has to go into a grid, so it was pretty easy to calculate which spot in the grid that the mouse is over. But for anything more than that, you're going to have to be able to detect "that certain area of the page".

fbelzile
Oct 27th, 2009, 03:37 AM
See thats where I draw a blank, I did not make this code. It was freely available. I understand that the x and y are the starting coordinates. Are the tx and ty the "current" (after the drag) coordinates.

Where in the code should I add this (if correct) ?



if (tx-x<10 || ty-y<10) {
window.open('page2.html','page2', ...);
}

fbelzile
Oct 27th, 2009, 06:48 PM
OK, I got the link working, finally... Although it does not have the 10 pixel leeway (I don't see why not though). I'm happy with I got anyway, enough tinkering went into it.
BUT there's one big problem, after the first drag, if you click anywhere on the page, page2 will load.

Here is my recent code:

Old Pedant
Oct 27th, 2009, 11:27 PM
That can't be right.

It should be:


nx = nn6 ? e.clientX - x : event.clientX - x;
ny = nn6 ? e.clientY - y : event.clientY - y;

Because look how x and y were created:


x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;

See? When x and y were created, they were *NOT* biased by tx/ty.

Also, your code here:


if (nx<10) {
window.open('page2.html','page2');
}
if (ny<10) {
window.open('page2.html','page2');
}

is ignoring many possibilities:
(a) nx or ny might be HUGELY negative...maybe -200 pixels. And you'd see < 10 and accept them.
(b) nx might indeed be zero and yet ny might be 300 (because the drag was straight vertical) and you'd trigger on just the nx value.
(b) ny might indeed be zero and yet nx might be 400 (because the drag was straight horizontal) and you'd trigger on just the ny value.

So:


function hyperlink()
{
if ( Math.abs(nx) <= 10 && Math.abs(ny) <= 10 )
{
window.open('page2.html','page2');
}
nx=ny=x=y=0; // none of these should be needed, but won't hurt
isdrag=false;
}

fbelzile
Oct 28th, 2009, 01:25 AM
Hi, thanks a lot. Now that leeway is there, I see what you mean ... and I realized what you said about the nx<10. Anyways, I plugged in the corrections you made to my very bad code and like I said the leeway works, but if I click anywhere on the page (a blank spot) after I drag the image (or if I click twice on the blank page), the link will load up as if I clicked the image. Here is my updated code.

Note: I also tried to declare the nx and ny variables where the x and y ones are, but no matter where I "dropped" the image, the link would load.

Tested in both Firefox 3.0.14 and IE 8.



var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var x,y,nx,ny;
var dobj;

function movemouse(e)
{
if (isdrag)
{

dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
nx = nn6 ? e.clientX - x : event.clientX - x;
ny = nn6 ? e.clientY - y : event.clientY - y;

return false;
}

}

function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";

while (fobj.tagName != topelement && fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}

if (fobj.className=="dragme")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;

document.onmousemove=movemouse;

return false;
}
}
function hyperlink()
{
if ( Math.abs(nx) <= 10 && Math.abs(ny) <= 10 )
{
window.open('page2.html','page2');
}
nx=ny=x=y=0;
isdrag=false;
}
document.onmousedown=selectmouse;
document.onmouseup=hyperlink;



Is it because its using
document.onmousedown=selectmouse;
document.onmouseup=hyperlink; (last two lines) that it takes control of the full page after a click?

Thanks again for the help so far.

Old Pedant
Oct 28th, 2009, 01:44 AM
Can you show it live someplace?? A live website, that is? So I don't have to duplicate the HTML parts?

fbelzile
Oct 28th, 2009, 03:41 AM
http://fbelzile.000a.biz/

Old Pedant
Oct 28th, 2009, 06:15 AM
Oh, DOH on BOTH of us!!!

Look at the logic:


function hyperlink()
{
if ( Math.abs(nx) <= 10 && Math.abs(ny) <= 10 )
{
window.open('page2.html','page2');
}
nx=ny=x=y=0; // none of these should be needed, but won't hurt
isdrag=false;
}


Okay, so after doing a DRAG, what does that code do, if the mouse *is* released someplace not near the start of the drag?? It doesn't go to page2. But it *DOES* set nx and ny to *ZERO*!!!!!!!

And so on the NEXT mouseup, the test for nx and ny *DOES* send you off to page2!!!!

DOH!!

So the obvious answer:

Initialize nx and ny to BIG numbers, *NOT* zero!

Both in the declaration *AND* In the hyperlink function:


var nx = 9999;
var ny = 9999;

...

function hyperlink()
{
if ( Math.abs(nx) <= 10 && Math.abs(ny) <= 10 )
{
window.open('page2.html','page2');
}
x = y = 0;
nx = ny = 9999;
isdrag=false;
}


That should have been obvious just looking at the code, but it took actually experiencing it for it to "click" in my head! LOL!

fbelzile
Oct 28th, 2009, 04:38 PM
I finally got it! I applied the changes you gave me but made a small change. I had to make nx and ny equal 0 where I set the values for x and y. If I declared nx and ny to 9999 in the top part, and the user does not move the mouse at all, the values will remain unchanged and when it gets to the if statement, it will be greater than 10. Here is the final code that works (going to update the website so you can see:



var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var x,y,nx,ny;
var dobj;

function movemouse(e)
{
if (isdrag)
{

dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
nx = nn6 ? e.clientX - x : event.clientX - x;
ny = nn6 ? e.clientY - y : event.clientY - y;

return false;
}

}

function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";

while (fobj.tagName != topelement && fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}

if (fobj.className=="dragme")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
nx = ny = 0;
document.onmousemove=movemouse;

return false;
}
}
function hyperlink()
{
if ( Math.abs(nx) <= 10 && Math.abs(ny) <= 10 )
{
window.open('page2.html','page2');
}
x = y = 0;
nx = ny = 9999;
isdrag=false;
}
document.onmousedown=selectmouse;
document.onmouseup=hyperlink;

Thank you again for all the help! I will try to figure out how to do make the picture undroppable on a certain spot on the page (to move it to default location). I'll be back if I need help!