約 30 枚の画像 (一度に 5 枚を表示) を含む jQuery 画像カルーセルを作成する必要があります。これにより、ユーザーは各画像を移動し (おそらくドラッグ可能として実装されます)、その画像をドロップ可能な div にドロップできます。jCarousel を試してみましたが、私の状況ではうまくいかないと思います。何か知ってる人いますか?
質問する
2108 次
1 に答える
4
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>
于 2011-08-11T20:36:45.100 に答える