可拖動圖像的jQuery UI圖像旋轉木馬

Question

我需要創建一個包含大約30幅圖像（每次顯示5個）的jQuery圖像旋轉木馬，這也將允許用戶移動每個圖像（可能實現爲可拖動）並放棄該圖像成爲可投資的股利。我嘗試過使用jCarousel，但我認爲它不適合我的情況。任何人都知道的東西？

Answer 1

你將不得不導入jquery，jqueryui，jcarousel和與jcarousel和jquery ui相關的任何適用的css。目前，我在拖動圖像後刪除旋轉木馬中的佔位符時遇到問題。它留下一個白色的盒子。希望這有助於。如果我找出一個完整的解決方案，我會讓你知道。

<script type="text/javascript"> 


    jQuery(document).ready(function() { 
     $('#mycarousel').jcarousel(); 

     var $gallery = $("#mycarousel"), 
      $trash = $("#dropzone"); 

     $(".draggable").draggable({ 
      snap: '#dropzone', 
      snapMode: 'inner', 
      //snapTolerance: 50, 
      revert: 'invalid', 
      helper: 'clone', 
      appendTo: "body", 
      cursor: 'move' 
     }); 

     $("#dropzone").droppable({ 
      accept: '.draggable', 
      activeClass: "custom-state-active", 
      drop: function(ev, ui) { 
       //$item.appendTo("#dropzone"); 
       deleteImage(ui.draggable); 


      } 
     }); 

     function deleteImage($item) { 
      $item.css('display', 'none'); 
      $item.fadeOut(function() { 
       var $list = $("ul", $trash).length ? 
       $("ul", $trash) : 
       $("<ul class='gallery ui-helper-reset'/>").appendTo($trash); 


       $item.appendTo($list).fadeIn(); 

      }); 
     } 
    }); 

    </script> 



     <div id="dropzone" class="ui-widget-content ui-state-default" style="width: 960px; height: 300px; "> 
    <h1 style="text-align: center; margin-top: 120px;">Drag Images Here</h1> 
    </div> 


    <div style="height: 50px; width: 100%; clear: both;"></div> 

    <div class="carousel_container"> 
     <ul id="mycarousel" class="jcarousel-skin-tango"> 
      <li class="ui-widget-content draggable"> <!-- class="ui-widget-content dropme" --> 
       <img src="images/IA_interactive_hugging.jpg" width="200px" height="200px" alt="" /> 
      </li> 
      <li class="ui-widget-content draggable"> 
       <img src="images/IA_interactive_kilamanjaro.jpg" width="200px" height="200px" alt="" /> 
      </li> 
      <li class="ui-widget-content draggable"> 
       <img src="images/IA_interactive_rhino.jpg" width="200px" height="200px" alt="" /> 
      </li> 
      <li class="ui-widget-content draggable"> 
       <img src="images/IA_interactive_statuemonkey.jpg" width="200px" height="200px" alt="" /> 
      </li> 
      <li class="ui-widget-content draggable"> 
       <img src="images/IA_ThresholdImageSampleA_AJB_080311.jpg" width="200px" height="200px" alt="" /> 
      </li> 
      <li class="ui-widget-content draggable"> 
       <img src="images/IA_ThresholdImageSampleB_AJB_080311.jpg" width="200px" height="200px" alt="" /> 
      </li> 
      <li class="ui-widget-content draggable"> 
       <img src="images/IA_ThresholdImageSampleC_AJB_080311.jpg" width="200px" height="200px" alt="" /> 
      </li> 
      <li class="ui-widget-content draggable"> 
       <img src="images/IA_ThresholdImageSampleD_AJB_080311.jpg" width="200px" height="200px" alt="" /> 
      </li> 
      <li class="ui-widget-content draggable"> 
       <img src="images/IA_ThresholdImageSampleE_AJB_080311.jpg" width="200px" height="200px" alt="" /> 
      </li> 
      <li class="ui-widget-content draggable"> 
       <img src="images/IA_ThresholdImageSampleF_AJB_080311.jpg" width="200px" height="200px" alt="" /> 
      </li> 
      <li class="ui-widget-content draggable"> 
       <img src="images/IA_ThresholdImageSampleG_AJB_080311.jpg" width="200px" height="200px" alt="" /> 
      </li> 
      <li class="ui-widget-content draggable"> 
       <img src="images/IA_ThresholdImageSampleH_AJB_080311.jpg" width="200px" height="200px" alt="" /> 
      </li> 
      <li class="ui-widget-content draggable"> 
       <img src="images/IA_ThresholdImageSampleI_AJB_080311.jpg" width="200px" height="200px" alt="" /> 
      </li> 
     </ul> 
    </div>