: Enabling drag and drop in my CMS (Content Management System) I'm using Drupal as CMS for my websites and I was wondering if there is a way to enable dragNdrop functionalities to upload images

@Jennifer507

Install these


drupal.org/project/cck
drupal.org/project/imagefield
drupal.org/project/dragndrop_uploads



Once installed, Drag'n'Drop Uploads
needs to be configured for each
Content Type you wish to use, this can
be done on the Content Type
configuration page under "Drag'n'Drop
Uploads settings":

[www.yoursite.com/path/to/drupal]/admin/content/node-type/[node-type]

Vote Up Vote Down

@Jennifer507

I don't know of a great plugin that seamlessly handles the javascript side of all file drag'n'drop interactions for an arbitrary web application (or I would've used one for our drag and drop stuff).

However, there is a pretty cheap hack you (or any plugin HTML/JS/CSS plugin developer) can use that we took advantage of in FogBugz. If you find the input[type="file"] element on your page and use CSS to make it invisible and the full width/height of your page, this will let you drag'n'drop files onto your browser.
#drop input {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
}


The plugin will obviously have to use JS to manage the add/remove of these styles to the element.

Please don't yell at me for not using the HTML5 File API. It's usable, but pretty up-in-the-air x-browser stability-wise right now. We went w/ the quickest solution that would let us discover whether or not our users found drag'n'drop to be useful.

It works in Chrome and, for single files at a time, Safari. Full details available here: www.thecssninja.com/javascript/gmail-upload
Bonus: somebody should really develop a simple little jQuery plugin that finds the first visible input[type="file"] element on the page and applies these styles w/ a nice little "drop here" target and animation.

Vote Up Vote Down