SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    421
    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
    421
    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,321
    Mentioned
    178 Post(s)
    Tagged
    9 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
    421
    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,321
    Mentioned
    178 Post(s)
    Tagged
    9 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
    421
    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,321
    Mentioned
    178 Post(s)
    Tagged
    9 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
    421
    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
  •