jQuery带拖放功能的走马灯

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

- asterix

---

你能否发布一些代码来展示你是如何实现这个的？ - locoboy

Answer 1

我曾经遇到过同样的问题，通过以下代码解决：

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

- Seyed Mohammad Hossein Mayboud

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

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

- mmundiff