Drag and Drop Images Into Web Folders

  • Hacker007
  • Proficient
  • Proficient
  • User avatar
  • Joined: Apr 07, 2004
  • Posts: 371
  • Loc: Riverside, CA
  • Status: Offline

Post March 22nd, 2009, 10:09 am

Hello all, I have come once again for some help on a web project I am currently Undertaking. I am working on an image hosting service for my message board users. Currently, users are able to upload images to the webserver, which are stored in individual folders labeled with their user id. I am looking to allow them to create subfolders, to which they can sort their uploads into. Does anyone know of a way I can create a drag'n'drop interface, which would allow the user to drag an image from their main directory, over a folder link and have the image be moved into that folder? (similar to the way windows or just about any FTP program allows you to do)

I can handle the PHP for moving the image, all I need help with is a dhtml/javascript/or ajax script that will recognize when an image is dropped over the folder link, and then send a request to the server to move the image.

I have searched google, and ozzu for topics/tutorials/ect that would help, but have been unsuccessful! If anyone knows how and can give me a script, ideas, or a tutorial that would be much appreciated!

If you need a better idea, I have saved this page so show you the general layout of the image gallery and folder display:

http://www.koolzone.net/imgstore/Example.html
"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." -Martin Golding
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post March 22nd, 2009, 10:09 am

  • northstjarna
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Nov 14, 2006
  • Posts: 58
  • Loc: Chertsey, UK
  • Status: Offline

Post March 26th, 2009, 2:58 pm

Hi there,

I haven't figured this out yet but I have an idea...

Ok, are you listing the folders through a database or directly reading the file tree using a file directory listing?

I thought about this... employ javascript and make an ajax call when the item is registered over the disered location.. IE by passing the ID of one conatiner to the other and getting the directory name when one container is over the other...

So basically the variables you might need... ID, existing file/folder name, new_file/folder_name (IE the one hovered over) pass them through ajax on Mouseup to pass url variables in the ajax to an update SQL query using the new and old folder names and ID. IE where it came from and went too.

Could you use this tutorial??

http://www.webreference.com/programming ... k/column2/

Thanks

Andi
  • Hacker007
  • Proficient
  • Proficient
  • User avatar
  • Joined: Apr 07, 2004
  • Posts: 371
  • Loc: Riverside, CA
  • Status: Offline

Post March 29th, 2009, 12:40 pm

Thankyou for the reply!
The problem I am having is how to know when the dragged item is on top of my links. I looked at the tutorial posted and was unable to get any help from it unfortunately.
"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." -Martin Golding

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 65 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.