Very simple HTML5 drag and drop

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
rhecker
Forum Contributor
Posts: 178
Joined: Fri Jul 11, 2008 5:49 pm

Very simple HTML5 drag and drop

Post by rhecker »

I need to be able to drop the filename of an image from one browser window to a form text input in a different window.

The files are already on the web server and the process will only be done by browsers supporting html5.

The only problem I have is that when I drag an image to the input box, it inserts 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 solution involves the file object .name property, but I don't know how to implement this.

Any help appreciated.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Very simple HTML5 drag and drop

Post by Christopher »

Post your code.
(#10850)
rhecker
Forum Contributor
Posts: 178
Joined: Fri Jul 11, 2008 5:49 pm

Re: Very simple HTML5 drag and drop

Post by rhecker »

Hi Christopher, although I understand the importance of posting code, I didn't see how that would help for this question, but here it is. As you can see, it's just an image tag and an input tag. What's missin is the javascript function that would change the value of the dropped item to just the file name.

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 ?>">
Post Reply