Question

只是一个普遍的问题。有谁知道是否有可能将jquery拖放与jcarousel结合起来？我希望能够将图像放入旋转木马中。如果有可能，有人能指出我找到教程或某种指导的正确方向吗？

谢谢！

Answer 1

好。我自己想出来了。这里有一个粗略的概念，我做了什么，以防它帮助其他人。有可用产品列表和旋转木马。在将任何产品拖入其中之前，“DRAG ITEMS HERE”消息以旋转木马为中心，这是通过css分层实现的。可放置区域包括该消息和位于消息下方的轮播。将项目移动到放置区域后，将删除叠加消息并增加轮播的大小。你必须从零开始，因为jcarousel将自动填充第一项。从零开始重写自动创建的项目。我还必须在轮播中的项目顶部添加一个浮动的删除按钮，即“＆lt; div class = \”RemoveItem \“＆gt;＆lt; / div＆gt;”。因为在可用产品上有一个浮动的添加按钮，我不得不添加一个类（“ImagePosition”）来给产品本身相对定位，这在拖动时被移除，因此它将留下可用的产品容器。很多人继续。无论如何，它并不完美，但它确实有效。我对听到改进很感兴趣。

<div class="ProductBundlerOverlay" id="dialogProductBundler" style="display: none;">
    <div class="Inner">
        <div class="BundlerTop">
            <div class="CloseWindow" onclick="$('#dialogProductBundler').dialog('close');">
                <div class="Text">Close</div>
                <div class="Button"><img src="bundler/CloseBtn.png" alt="Close" border="0" /></div>
                <div style="clear: both;"></div>
            </div>
            <div id="BundlerTitle" class="BundlerTitle"></div>
            <div style="clear: both;"></div>
        </div>
        <div style="clear: both;"></div>
        <div id="BundlerDesc" class="BundlerDesc"></div>
        <div id="Bundler" class="Bundler ui-widget-content">
            <div class="PlaceHolder">DRAG ITEMS HERE</div>
            <ul id="bundlerCarousel" class="DropArea jcarousel-skin-tango">
            </ul>
        </div>
        <div id="BundlerTotal" class="BundlerTotal"></div>
        <div id="AvailableProducts" class="AvailableProducts">
            <ul>
                [this content dynamically created using jquery]
            </ul>
        </div>
    </div>
    <div style="clear: both;"></div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        jQuery('#bundlerCarousel').jcarousel({
            visible: 5,
            itemLoadCallback: itemLoadCallbackFunction
        });
    })
</script>

在脚本文件中或在脚本标记中：

var varCarouselSize = 0;
$(".Image").draggable({
    helper: "clone",
    start: function(event, ui) {
        $(this).find("div").remove()
        $(this).removeClass("ImagePosition")
    },
    stop: function(event, ui) {
        $(this).addClass("ImagePosition").append("<div class=\"AddItem\"></div>").click(function() {
        })
    }
});


$("#Bundler").droppable({
    accept: ".Image",
    //activeClass: "ui-state-default",
    //hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        //alert("size " + varCarouselSize);
        if (varCarouselSize == 0)
        {
            $(".PlaceHolder").remove();
            varCarouselSize = 1;
        }
        var el=$("<li class=\"ItemContainer\"><div class=\"RemoveItem\"></div>" + ui.draggable.clone().html() + "</li>").filter('li').find('div.RemoveItem').click(function(){el.remove()}).end();
        $("#bundlerCarousel").jcarousel('size',varCarouselSize);
        $("#bundlerCarousel").jcarousel('add', varCarouselSize, el);
        varCarouselSize ++;
    }
});

function itemLoadCallbackFunction(carousel, state)
{
    //alert(state);
    if (state == 'init') {
        carousel.size(0);
    }
}

JQUERY：可以将拖放与jcarousel结合使用吗？

1 个答案: