jQuery轮播与拖放

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

我有图像轮播使用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,"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",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

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