可拖动图像的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>