Drag and drop (to open link)

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:

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">
<meta charset="utf-8">
<title>Member Profiles < Fellowship of Authors and Artists</title>
<link href="styles.css" rel="stylesheet" type="text/css">
function allowDrop(ev) {

function drag(ev) {

function drop(ev) {
  var data=ev.dataTransfer.getData("Text");
<div id="wrapper">
  <div id="header">
    <h1>Fellowship of Authors and Artists</h1>
  <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>
  <div id="footer">
    <p>Website &copy; copyright, 2013, Fellowship of Authors and Artists</p>


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


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) {

function drop(ev) {
  var data=ev.dataTransfer.getData("Url");

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