[jQuery] Multiple draggable (interface) drag/drop question

[dennis]

I have gotten drag/ drop working with one draggable.
I need to know the right way to do multiple draggables.

I have a gallery app that will display rows of thumbnail images,
and I need to be able to drag some subset of those into
the dropbox.

I have code working, like that below. I *CAN* make multiple
copies of the Draggable and the Droppable calls to handle
the multiple draggable thumbnails (I've tried, that works),
but that seems klunkey to me. If there are, say, 20 thumbs
on a page, that's 20 Draggable calls, 20 Droppable calls....

Is there a trimmer, better approach?


/dennis

jQuery 1.1, interface 1.2
=============================
JAVASCRIPT:
$(document).ready(
function() {

 $('#drag1').Draggable(
  {
   settings...
  }
 );

 $('#drag2').Draggable(
  {
   settings...
  }
 );

 $('#dropbox').Droppable(
  {
   settings...
   ondrop:      function (drag1) {
     var PhotoSrc = $('img',drag1).attr('src'); //
     alert( PhotoSrc );
     },
  }
  );

 $('#dropbox').Droppable(
  {
   settings...
   ondrop:      function (drag2) {
     var PhotoSrc = $('img',drag2).attr('src'); //
     alert( PhotoSrc );
     },
  }
  );
}
);
=============================
HTML:
<div id="dropbox" class="dropzone">Drop the photo in here</div>

<div id="theImages">
<div id="drag1" class="dropaccept">
  <img src="some/path/image1.jpg"></a>
</div>
<div id="drag2" class="dropaccept">
  <img src="some/path/image2.jpg"></a>
</div>