드래그 가능한 이미지가있는 jQuery UI 이미지 회전식 메뉴

Question

약 30 개의 이미지 (한 번에 5 개씩 표시)로 jQuery 이미지 회전식을 만들면 사용자가 각 이미지 (드래그 가능한 것으로 구현 된 것으로 추정 됨)를 이동하고 이미지를 드롭 할 수 있습니다. 드롭 가능한 div에 넣습니다. 저는 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>