Jquery ui JQUERY：可以将拖放与jcarousel结合起来吗？_Jquery Ui

Jquery ui JQUERY：可以将拖放与jcarousel结合起来吗？

jquery-ui

Jquery ui JQUERY：可以将拖放与jcarousel结合起来吗？,jquery-ui,Jquery Ui,只是一个一般性的问题。有人知道是否可以将jquery拖放与jcarousel结合起来吗？我希望能够将图像放入旋转木马。如果可能的话，有人能为我指出一个正确的方向，让我找到一个教程或某种指导吗谢谢好的。这是我自己想出来的。这是我做的一个大概的想法，以防对其他人有所帮助。有一个可用产品列表和旋转木马。在将任何产品拖动到其中之前，“Dragitemshere”消息在旋转木马中居中，这是通过css分层实现的。可拖放区域包括该消息和消息下方的旋转木马。一旦一个项目被移动到放置区域，上面的信息就会被移除

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

谢谢

好的。这是我自己想出来的。这是我做的一个大概的想法，以防对其他人有所帮助。有一个可用产品列表和旋转木马。在将任何产品拖动到其中之前，“Dragitemshere”消息在旋转木马中居中，这是通过css分层实现的。可拖放区域包括该消息和消息下方的旋转木马。一旦一个项目被移动到放置区域，上面的信息就会被移除，转盘的大小也会增加。您必须从零开始，因为jcarousel将自动填充第一项。从零开始写入自动创建的项。我还必须在旋转木马中的项目顶部添加一个浮动删除按钮，即“”。因为在可用产品上有一个浮动的add按钮，所以我必须添加一个类（“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>


接近
将项目拖到此处



[此内容使用jquery动态创建]

$（文档）.ready（函数（）{
jQuery（'#bundlerCarousel'）.jcarousel({
可见：5，
itemLoadCallback:itemLoadCallback函数
});
})

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

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);
    }
}

var varCarouselSize=0；
$（“.Image”）.draggable({
助手：“克隆”，
开始：功能（事件、用户界面）{
$（this.find（“div”）.remove（）
$（此）.removeClass（“ImagePosition”）
},
停止：功能（事件、用户界面）{
$（this）.addClass（“ImagePosition”）.append（“”）。单击（函数（）{
})
}
});
$（“#捆绑机”）。可拖放({
接受：“.Image”，
//activeClass：“ui状态默认值”，
//hoverClass:“ui状态悬停”，
drop：函数（事件、用户界面）{
//警报（“大小”+varcarouselize）；
if（varcarouselize==0）
{
$（“.PlaceHolder”）.remove（）；
varcarouselize=1；
}
var el=$（“”+ui.draggable.clone（）.html（）+“”）.filter（'li'）。find（'div.removietem'）。单击（函数（）{el.remove（））。end（）；
$（“#bundlerCarousel”）.jcarousel（'size'，varcarouselize）；
$（“#bundlerCarousel”）.jcarousel（'add'，varcarouselize，el）；
varcarouselize++；
}
});
函数项LoadCallbackFunction（转盘，状态）
{
//警报（状态）；
如果（状态=='init'）{
转盘尺寸（0）；
}
}

<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>


接近
将项目拖到此处



[此内容使用jquery动态创建]

$（文档）.ready（函数（）{
jQuery（'#bundlerCarousel'）.jcarousel({
可见：5，
itemLoadCallback:itemLoadCallback函数
});
})

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

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);
    }
}

var varCarouselSize=0；
$（“.Image”）.draggable({
助手：“克隆”，
开始：功能（事件、用户界面）{
$（this.find（“div”）.remove（）
$（此）.removeClass（“ImagePosition”）
},
停止：功能（事件、用户界面）{
$（this）.addClass（“ImagePosition”）.append（“”）。单击（函数（）{
})
}
});
$（“#捆绑机”）。可拖放({
接受：“.Image”，
//activeClass：“ui状态默认值”，
//hoverClass:“ui状态悬停”，
drop：函数（事件、用户界面）{
//警报（“大小”+varcarouselize）；
if（varcarouselize==0）
{
$（“.PlaceHolder”）.remove（）；
varcarouselize=1；
}
var el=$（“”+ui.draggable.clone（）.html（）+“”）.filter（'li'）。find（'div.removietem'）。单击（函数（）{el.remove（））。end（）；
$（“#bundlerCarousel”）.jcarousel（'size'，varcarouselize）；
$（“#bundlerCarousel”）.jcarousel（'add'，varcarouselize，el）；
varcarouselize++；
}
});
函数项LoadCallbackFunction（转盘，状态）
{
//a