Блог

Просто общий вопрос. Кто-нибудь знает, можно ли объединить перетаскивание jquery с jcarousel? Я хочу иметь возможность помещать изображения В карусель. Если это возможно, не мог бы кто-нибудь указать мне правильное направление, чтобы найти учебник или какое-то руководство?

Спасибо!

Хорошо. Я сам это понял. Вот примерное представление о том, что я сделал, на случай, если это поможет кому-то еще. Существует список доступных продуктов и карусель. Перед перетаскиванием в него каких-либо продуктов сообщение «ПЕРЕТАЩИТЕ ЭЛЕМЕНТЫ СЮДА» центрируется по всей карусели, что достигается с помощью наслоения css. Область, доступная для удаления, включает в себя как это сообщение, так и карусель, которая находится под сообщением. Как только элемент перемещается в область перетаскивания, вышележащее сообщение удаляется, а размер карусели увеличивается. Вы должны начать с нуля, потому что jcarousel автоматически заполнит первый элемент. Начиная с нуля, перезаписывается автоматически созданный элемент. Мне также пришлось добавить плавающую кнопку удаления поверх элемента в карусели, которая является «<div class=»removeItem»> </div>». Поскольку над доступным продуктом есть плавающая кнопка добавления, мне пришлось добавить класс («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);
    }
}