我正在使用 jQuery UI Droppable Cart 演示插件,我想在 Dropped 区域达到 5 个元素后创建一个轮播或箭头...如果我单击“Arrows”,则应显示 remaning
<小时/><小时/>
HTML
<div id="products">
<h2>Drag</h2>
<div id="catalog">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
<div id="cart">
<h2>Drop Here...</h2>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
jQuery
$(function() {
$( "#catalog li" ).draggable({
appendTo: "body",
helper: "clone"
});
$( "#cart ol" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});
<小时/>Screenshots...
直到 5 个元素
<小时/>
拖动 5 个元素后
最佳答案
您可以将 jQuery 函数更改为:
$(function() {
$( "#catalog li" ).draggable({
appendTo: "body",
helper: "clone"
});
$( "#cart ol" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
if($('.ui-droppable li').length > 5) {
//bind your carousel here
}
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});
关于jquery - 添加 5 个元素后创建轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29813443/