SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Beginner question: Changing value of dragged/ dropped object, HTML5

    I need to be able to drag an image from one browser window to a form text input in a different window, populating it with the image file name.

    I can do this easily, except that the result is the whole url, and I only want the filename to be inserted. In other words, it inserts http://www.path/path/file.jpg, but I just want to end up with file.jpg.

    I believe the file object .name property holds the info I need, but I don't know how to populate the input field with it.

    I will post the code, just to be clear.

    On page 1
    PHP Code:
    echo "<div class='image_item'><img src='$path/$value' draggable='true'/><br/>"

    On page 2
    Code:
    <input name ="page_image" type="text" size=50 value="<?php echo $page_image ?>">
    As you can see, there is no javascript in the example, but I am sure that javascript is necessary to change the value of the object as needed.

    Any help appreciated.

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I doubt the name property has what you're looking for. I believe you'll just have to manually pass the data, using the dataTransfer object. Here's a quick/dirty jsFiddle that does (I think) what you want; this is the basic code that it uses:

    Code JavaScript:
    yourImage.addEventListener('dragstart', function (e) {
        var name = e.target.src.split('/');
        name = name[name.length - 1]; // this is how I did it; there's probably a better way :/
        e.dataTransfer.setData('Text', name);
    }, false);
     
     
     
    /*
     * MEANWHILE... IN A DIFFERENT WINDOW
     */
     
    // just because we have to :/
    yourTextbox.addEventListener('dragover', function (e) { e.preventDefault(); }, false);
     
    yourTextbox.addEventListener('drop', function (e) {
        e.target.value = e.dataTransfer.getData('Text');
    }, false);
    I'm the web overlord for Graphic Business Systems

  3. #3
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Almost

    sdleihssirhc, thank you for working up that example. That was very kind. It worked when I tried it at jsFiddle, but when I pasted the code in a new document, I got the same result as before, the whole url. I tinkered with your code, then looked for other info on the web, but I still don't have a solution.

    There are two things I didn't mention before that are relevant. Firstly, the images being moved are from an image gallery created dynamically, so it seems like it might be good if the trigger were something like "dragstart' in the img tag. A lot of examples I've seen use getElementById, which would not work, since all the images would have the same id.

    Secondly, the file name is available from the recordset, so it doesn't have to be parsed from the url. In other words, it could be var filename = <?php echo $image_name ?>;

    Any further pointers greatly appreciated.

  4. #4
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'll deal with the second problem first (the one where you have a bunch of dynamically generated images, so selecting each of them and attaching a "dragstart" event listener is impractical):

    I have wonderful news! The "drag*" events bubble!

    Maybe you know what that means, and how awesome it is. But if not, here's a brief example. With the following HTML...

    HTML Code:
    <ul id="gallery">
        <li><img src="..." /></li>
        <li><img src="..." /></li>
        <!-- etc -->
    </ul>
    ...all you need to do is attach your "dragstart" listener to the common parent, like so:

    Code JavaScript:
    var ul = document.getElementById('gallery');
    ul.addEventListener('dragstart', function (e) {
        // refer to img being dragged with e.target
        // get the original file name somehow
        e.dataTransfer.setData('Text', filename);
    }, false);

    I love it when a plan comes together.

    I'm not sure why my code didn't work for you, however. I tested with different windows just to make sure.... Can you link to a live example?

    Also, when you say that "the file name is available from the recordset," I'm afraid I'm not sure what that means. Does it mean that, when the "dragstart" begins, you already know what the original file name is? And you don't have to worry about figuring it out? And we can just focus on the actual transferring-from-one-window-to-the-other-via-draggable-images part?

    Because that would be pretty cool.
    I'm the web overlord for Graphic Business Systems

  5. #5
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your continued attention to this. Much appreciated.

    I misspoke when I said the filename is available from the the recordset, but I STILL know the filenames because the gallery is constructed by a PHP script that loops through the directory, pulling each file name into the variable "$value".

    I have put an example of my attempts to use your code at http://www.datatest.net/index.html. Thanks for looking.

  6. #6
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    There we go, I found the problem: You're trying to add the "dragstart" event listener to the <ul> before it exists. You have your HTML laid out like so...

    HTML Code:
    <script>
    ...
    </script>
    
    <ul>
    ...
    </ul>
    ...and it needs to be like this:

    HTML Code:
    <ul>
    ...
    </ul>
    
    <script>
    ...
    </script>
    I'm almost positive that if you make that change, it will finally work.
    Last edited by sdleihssirhc; Jan 27, 2012 at 00:35. Reason: typo
    I'm the web overlord for Graphic Business Systems

  7. #7
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are right! And now the whole problem is solved. Whew! Thanks for your kind help.


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
  •