jQuery UI image carousel with draggable images

I need to create a jQuery image carousel with about 30 images (displaying 5 at a time) that will also allow the user to move each image (presumably implemented as a draggable) and drop that image into a droppable div. I've experimented with jCarousel and I don't think it will work for my situation. Anyone know of something?

You would have to import jquery, jqueryui, jcarousel and any applicable css associated with jcarousel and jquery ui. Currently I'm having a problem deleting the placeholder in the carousel after the image has been dragged. It leaves a white box. Hope this helps though. If i figure out a full solution I'll let you know.

<script type="text/javascript">


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

        var $gallery = $( "#mycarousel" ),
            $trash = $( "#dropzone" );

        $(".draggable").draggable({
            snap: '#dropzone',
            snapMode: 'inner',
            //snapTolerance: 50,
            revert: 'invalid',
            helper: 'clone',
            appendTo: "body",
            cursor: 'move'
        });

        $("#dropzone").droppable({
            accept: '.draggable',
            activeClass: "custom-state-active",
            drop: function(ev, ui) {
                //$item.appendTo("#dropzone");
                deleteImage( ui.draggable );


            }
        });

        function deleteImage( $item ) {
            $item.css('display', 'none');
            $item.fadeOut(function() {
                var $list = $( "ul", $trash ).length ?
                $( "ul", $trash ) :
                $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );


                $item.appendTo( $list ).fadeIn();

            });
        }
    });

    </script>



      <div id="dropzone" class="ui-widget-content ui-state-default" style="width: 960px; height: 300px; ">
     <h1 style="text-align: center; margin-top: 120px;">Drag Images Here</h1>
    </div>


    <div style="height: 50px; width: 100%; clear: both;"></div>

    <div class="carousel_container">
        <ul id="mycarousel" class="jcarousel-skin-tango">
            <li class="ui-widget-content draggable"> <!-- class="ui-widget-content dropme" -->
                <img src="images/IA_interactive_hugging.jpg" width="200px" height="200px" alt="" />
            </li>
            <li class="ui-widget-content draggable">
                <img src="images/IA_interactive_kilamanjaro.jpg" width="200px" height="200px" alt="" />
            </li>
            <li class="ui-widget-content draggable">
                <img src="images/IA_interactive_rhino.jpg" width="200px" height="200px" alt="" />
            </li>
            <li class="ui-widget-content draggable">
                <img src="images/IA_interactive_statuemonkey.jpg" width="200px" height="200px" alt="" />
            </li>
            <li class="ui-widget-content draggable">
                <img src="images/IA_ThresholdImageSampleA_AJB_080311.jpg" width="200px" height="200px" alt="" />
            </li>
            <li class="ui-widget-content draggable">
                <img src="images/IA_ThresholdImageSampleB_AJB_080311.jpg" width="200px" height="200px" alt="" />
            </li>
            <li class="ui-widget-content draggable">
                <img src="images/IA_ThresholdImageSampleC_AJB_080311.jpg" width="200px" height="200px" alt="" />
            </li>
            <li class="ui-widget-content draggable">
                <img src="images/IA_ThresholdImageSampleD_AJB_080311.jpg" width="200px" height="200px" alt="" />
            </li>
            <li class="ui-widget-content draggable">
                <img src="images/IA_ThresholdImageSampleE_AJB_080311.jpg" width="200px" height="200px" alt="" />
            </li>
            <li class="ui-widget-content draggable">
                <img src="images/IA_ThresholdImageSampleF_AJB_080311.jpg" width="200px" height="200px" alt="" />
            </li>
            <li class="ui-widget-content draggable">
                <img src="images/IA_ThresholdImageSampleG_AJB_080311.jpg" width="200px" height="200px" alt="" />
            </li>
            <li class="ui-widget-content draggable">
                <img src="images/IA_ThresholdImageSampleH_AJB_080311.jpg" width="200px" height="200px" alt="" />
            </li>
            <li class="ui-widget-content draggable">
                <img src="images/IA_ThresholdImageSampleI_AJB_080311.jpg" width="200px" height="200px" alt="" />
            </li>
        </ul>
    </div>