带有可拖动图像的jQuery UI图像轮播

问题描述

| 我需要创建一个约有30张图像（一次显示5张）的jQuery图像轮播，这也将允许用户移动每张图像（假定实现为可拖动对象）并将该图像放入可放置div中。我已经尝试过jCarousel，但我认为它不会适合我的情况。有人知道吗？     

解决方法

        您将必须导入jquery，jqueryui，jcarousel以及与jcarousel和jquery ui关联的任何适用的CSS。目前，在拖动图像后，我在删除轮播中的占位符时遇到问题。它留下一个白色的盒子。希望这会有所帮助。如果我想出完整的解决方案，我会通知您。

<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>