SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.fellowshipofauthorsandart.../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
    blessed are the cracked for they let in the light

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi gandalf458,

    I opened the above url but don't find any image or any drag drop functionaility.
    PHP Programming It’s more than just writing code

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimmybrion View Post
    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:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Member Profiles &lt; 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>
    blessed are the cracked for they let in the light

  4. #4
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Collision detection can be non-trivial in terms of performance.
    You could try jquery-collision plus jquery-ui-draggable-collision.

    See here: http://stackoverflow.com/questions/3...ble-no-overlap

    HTH

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...
    blessed are the cracked for they let in the light

  6. #6
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Maybe you could just implement it that the links open when you drag them.
    That would be much easier to do.

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    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));
    }
    blessed are the cracked for they let in the light

  8. #8
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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. #9
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    blessed are the cracked for they let in the light


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •