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>
감사합니다. 이미지를 드래그 할 수있는 방법을 보여 주시겠습니까? 일단 드래그하면 컨베이어에서 삭제하는 대신 내 div가 상자와 같은 경우 어떻게 그 상자에 가운데 놓을 수 있습니까? 또한 이미지 ID를 어떻게 얻습니까? div로 드래그되었습니다 – Zaki
나는 그것을 테스트하지는 않았지만 $ ("# dropzone") .dropppable ({ deleteImage (ui.draggable); 라인을 삭제하면됩니다.) 일반적으로 이미지를 얻을 수 있습니다 id는 (this) .attr ("id")와 같은 jquery를 사용합니다. 센터링은 CSS 문제처럼 보입니다. – mmundiff