Drag and drop (to open link)

JavaScript
1

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 :slight_smile:

2

Hi gandalf458,

I opened the above url but don’t find any image or any drag drop functionaility.

3

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>&nbsp;</p>
  <div id="footer">
    <p>Website &copy; copyright, 2013, Fellowship of Authors and Artists</p>
  </div>
</div>
</body>
</html>
4

Hi,

Collision detection can be non-trivial in terms of performance.
You could try jquery-collision plus [URL=“http://sourceforge.net/projects/jquerycollision/”]jquery-ui-draggable-collision.

See here: http://stackoverflow.com/questions/3482388/jquery-draggable-no-overlap

HTH

5

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…

6

Maybe you could just implement it that the links open when you drag them.
That would be much easier to do.

7

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));
}
8

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.

9

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 :slight_smile: