JQuery drag and drop image from jcarousel

Question

II have a jcarousel which I populate the images with listview as below, whcih works fine :

<script type="text/javascript">

    jQuery(document).ready(function() {
        jQuery('#mycarousel').jcarousel();

    });

</script>

<div class="slidercontainer">
               <asp:ListView ID="lstImages" runat ="server" >

               <LayoutTemplate>
                <ul id="mycarousel" class="jcarousel-skin-tango">
                <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
                </ul>
               </LayoutTemplate>

               <ItemTemplate>
               <li>
               <image src="../Images/<%#Eval("ID") %>/<%#Eval("ImageName") %>"  width="95" height="75" alt="" />
               </li>
               </ItemTemplate>

            <EmptyDataTemplate>
            <div>
            No Images To Display
            </div>
            </EmptyDataTemplate>

               </asp:ListView>

            </div>

How would I make these images drag-able and drop them in a div? I have searched but couldn't find anything about it.

Your help would be appreciated.

EDIT :

I found this script which only works for one image only if I remove the above script which loads the jcarousel :

<script type="text/javascript">

$( init );

function init() {
  $('#makeMeDraggable').draggable();
  $('#makeMeDroppable').droppable( {
    drop: handleDropEvent
  } );
}

function handleDropEvent( event, ui ) {
  var draggable = ui.draggable;
  alert( 'The square with ID "' + draggable.attr('id') + '" was dropped onto me!' );
}

</script>

Answer 1

Found this great article that was doing exactly what i wanted:

http://mypaaji.com/Index.php/how-to-create-a-shopping-cart-widget/