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
echo "<div class='image_item'><img src='$path/$value' draggable='true'/><br/>";
On page 2
<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.
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:
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);
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.
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…
<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:
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.
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.
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…
<script>
...
</script>
<ul>
...
</ul>
…and it needs to be like this:
<ul>
...
</ul>
<script>
...
</script>
I’m almost positive that if you make that change, it will finally work.
You are right! And now the whole problem is solved. Whew! Thanks for your kind help.
