带有可拖动图像的jQuery UI图像轮播 [英] jQuery UI image carousel with draggable images

问题描述

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

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?

推荐答案

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

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>

这篇关于带有可拖动图像的jQuery UI图像轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！