Drag and Drop image

How does Panic activate the download button by the drag and drop of an image?

I assume the dragging of an image is nothing spectacular, but how to link the two to activate the download button?


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ve looked at their implementation before, it’s very nicely written
custom copyright code, so the best you can do is copy the idea rather
than their specific code. Scriptaculous has a very complete drag and
drop implementation you can use (since it’s very liberally licensed
with the MIT license), and the Protaculous Action[1] will help you set
it up on your page.

Apply Protaculous to the page, and draw your two objects (the one you
want to drag and the one where you want to drop. These can be DIVs or
graphics, makes no difference to the implementation. Just be sure to
name them something memorable. For this example, I’m calling them drag
and drop, respectively.

In the Actions palette, click on the Protaculous tab and set the
Library picker to scriptaculous. (After you’re done debugging, set
this to scriptaculous-packed for a noticeable difference in file size.)

Click on the top Function Body button, and paste the following:

new Draggable('drag',{revert:true,ghosting:true});
Droppables.add('drop',{onDrop:
	function(elm){
		alert(elm.id + ' was dropped on me!');
	}
});

Now to do something besides make this alert happen, change the body of
the onDrop function to reflect what you’d really like to do. In
Panic’s case, they are doing something like this:

document.location.href = 'uri/of/file';

Walter

  1. http://www.actionsforge.com/actions/view/18-protaculous

On Nov 28, 2008, at 12:52 PM, WebWorker wrote:

How does Panic activate the download button by the drag and drop of
an image?

I assume the dragging of an image is nothing spectacular, but how to
link the two to activate the download button?

http://www.panic.com/


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks I shall have a play with that.


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sometime around 28/11/08 (at 13:40 -0500) Walter Lee Davis said:

I’ve looked at their implementation before, it’s very nicely written
custom copyright code

Yep, those guys are seriously good code wizards, and damn fine
graphic designers as well. (Reminds me a little of a certain Mr
Davis…)

I remember certain versions of their site has contained lines such as
“no wussy visual editors used here, WADE!” - one of the members of
the Panic crew was (is?) a guy called Wade. Nice chap (like the rest
of 'em), but it seems he differed on opinions regarding how best to
build sites.

Oh, and if anyone is thinking of creating an archive of the current
site for study and inspiration purposes (remembering not to abuse
their copyright) I suggest you do it now. The top of the current home
page HTML source says:

k


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options