Question

我想构建一个带有两个图像轮播的网页，我希望能够将图像从一个轮播拖到另一个轮播。

我有图像轮播使用jCarouselLite：它使用两个UL元素来指定轮播的图像。这很好。

我可以制作两个UL列表的图像，其中列表可放置，图像可拖动。这很好。

但是当我尝试将这些列表设为旋转木马时，图像不会拖到旋转木马外面。这是因为轮播设置了一个CSS样式'overflow：hidden'来剪辑轮播中当前不可见的图像。

我在拖动时将其关闭以允许图像在旋转木马外拖动，但隐藏的图像也可见。我使用绝对位于旋转木马上方和左侧和右侧的DIV隐藏了这些。

当我将图像放到旋转木马上时，它不会自动显示它，所以当图像被丢弃时，我会让轮播重新创建。

这是我用于拖放的代码

$( "img.deck_card_draggable").draggable({
    revert: "invalid", 
    helper: "clone",
    containment: 'window',
    cursor: "move",
    zIndex: 30,
    start: function(event, ui) {
        $("div#user_deck_carousel").css("overflow", "visible");
        $("div#user_deck_carousel li").css("overflow", "visible");
    },
    stop: function(event, ui) {
        $("div#user_deck_carousel").css("overflow", "hidden");
        $("div#user_deck_carouselli ").css("overflow", "hidden");
    }
});

$( "div#user_swaps_image_carousel ul" ).droppable({
    accept: "img.deck_card_draggable",
    activeClass: "custom-state-active",
    drop: function( event, ui ) {
    // drop a copy of the image -- this is the required functionality
    var clone = ui.draggable.clone();
        clone.draggable({
            revert: "invalid", 
            helper: "clone",
            cursor: "move"
        });

        $( "div#user_swaps_image_carousel ul" ).
        append('<li style="overflow: hidden; float: left; width: 98px; height: 132px;">'
                +'<div><img width="74" height="122" src="'+clone.attr("src")+'" /></div></li>');
        numSwaps++;
        $("div#user_swaps_image_carousel").jCarouselLite({
            btnNext: "#swaps_next",
            btnPrev: "#swaps_prev",
            mouseWheel: true,
            circular: false,
            visible: numSwaps
        });
    },
});

这一切都有效，但似乎被黑了。

我的问题是：有更好的方法吗？

问候并感谢

PBB

Answer 1

我有同样的问题并通过此代码解决：

$("li", value).draggable({
    appendTo: "body",
    cancel: "a.ui-icon",
    revert: "invalid",
    helper: "clone",
    cursor: "move"
});

Answer 2

我刚遇到这个问题。发现此页面上的代码非常有用。 http://forum.jquery.com/topic/draggable-item-fixed-to-drag-outside-of-carousel-but-won-t-stick-when-dropped

它似乎不是一个css hack，也许只需要玩.draggable和.droppable

它解决了我的问题，也许也可以帮助你。

jQuery轮播与拖放

2 个答案: