如何解决带有可拖动图像的jQuery UI图像轮播
| 我需要创建一个约有30张图像(一次显示5张)的jQuery图像轮播,这也将允许用户移动每张图像(假定实现为可拖动对象)并将该图像放入可放置div中。我已经尝试过jCarousel,但我认为它不会适合我的情况。有人知道吗?解决方法
您将必须导入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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。