I want a user to be able to drag a small image over a name (within an anchor) to open a new link. I know it’s a bit naff but I’ve got to start somewhere. Online guides have got me so far but they don’t seem to explain it all.
My page at http://www.fellowshipofauthorsandartists.com/profiles2.php allows me to drag the image around but doesn’t open the a link page. Can anyone tell me what I’m missing please?
Thanks G 
Hi gandalf458,
I opened the above url but don’t find any image or any drag drop functionaility.
Hi Jimmy - that’s odd. The page displays fine for me. My code reads:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Member Profiles < Fellowship of Authors and Artists</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Fellowship of Authors and Artists</h1>
</div>
<h2>Member Profiles</h2>
<p><img src="images/cup.gif" alt="Coffee cup" width="76" height="47" id="drag1" draggable="true" ondragstart="drag(event)" class="right-pic">Welcome
to our Members’ Room. We presently have the following members. To view a member’s profile, give
them a cup of coffee! - drag the coffee cup and drop it over the member’s name. (Alternatively
you can just click on their name.)</p>
<p><a href="temp1.php" id="drop1" ondragover="allowDrop(event)" ondrop="drop(event)">Member 1</a> -
honorary member</p>
<p><a href="temp2.php" id="drop2" ondragover="allowDrop(event)" ondrop="drop(event)">Member 2</a> -
life member</p>
<p><a href="temp3.php" id="drop3" ondragover="allowDrop(event)" ondrop="drop(event)">Member 3</a> -
founder and life member</p>
<p> </p>
<div id="footer">
<p>Website © copyright, 2013, Fellowship of Authors and Artists</p>
</div>
</div>
</body>
</html>
Thanks Dave. Trust me to find something complicated for my first drag-and-drop outing! I think I found something on Stackoverflow that would have worked dragging the URL to an image - but I can’t seem to find that either now…
Maybe you could just implement it that the links open when you drag them.
That would be much easier to do.
Yes, I think it would. Unfortunately I can’t find the article now. I know I need to swap the drag id’s and drop id’s round and change the drag() and drop() functions. I think I have drag() right but I cannot remember what drop() should be.
function drag(ev) {
ev.dataTransfer.setData("Url",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Url");
ev.target.appendChild(document.getElementById(data));
}
Unless you’re trying to learn how to implement this yourself, I would just use jQuery UI draggable.
All you have to do to make an element draggable is just add a class to it.
You can then hook into the “dragstop” event to work out when to open the links.
Thanks Dave. I was trying to do it for a bit of fun but it has all got out of hand… I appreciate your help. G 