JQUERY：可能结合拖放与jcarousel？

Question

只是一个普遍的问题。有谁知道是否有可能将jquery drag/drop与jcarousel结合起来？我希望能够将图像放入旋转木马中。如果可能的话，是否有人能指引我寻找教程或某种指导的正确方向？

谢谢！

Answer 1

好的。我自己想到了这一点。这里有一个大概的想法，我可以帮助其他人。有一个可用产品和旋转木马的列表。在将任何产品拖入其中之前，“DRAG ITEMS HERE”（拖动项目处于此处）消息将集中在传送带上，这是通过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); 
    } 
}