我有一个标签式可排序列表系统。但是,我无法限制可以拖入哪个选项卡的内容。
我现在的javascript就像这样
<script>
$(function() {
$( "#sortable1, #sortable2, #sortable_end" ).sortable().disableSelection();
var $tabs = $( "#tabs" ).tabs();
var $tab_items = $( "ul:first li", $tabs ).droppable({
accept: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
var $item = $( this );
var $list = $( $item.find( "a" ).attr( "href" ) )
.find( ".connectedSortable" );
ui.draggable.hide( "slow", function() {
$tabs.tabs( "select", $tab_items.index( $item ) );
$( this ).appendTo( $list ).show( "slow" );
});
}
});
});
</script>
和我的HTML
<div id="tabs">
<ul>
<li><a href="#Models">Make</a></li>
<li><a href="#Minutes">Minutes</a></li>
<li><a href="#Final">Final</a></li>
</ul>
</div>
<div id="Models">
<ul id="sortable1" class="connectedSortable ui-helper-reset">
<li id="item_=1"><div>nokia lumia 800</div></li><li id="item_=2"><div>Apple iPhone 4s</div></li><li id="item_=3"><div>Samsung Galaxy S2</div></li><li id="item_=4"><div>Blackberry Bold 9900</div></li><li id="item_=5"><div>HTC Sensation XE</div></li><li id="item_=6"><div>Sony Ericsson Xperia Arc S</div></li> </ul>
</div>
<div id="Minutes">
<ul id="sortable2" class="connectedSortable ui-helper-reset">
<li id="item_=13"><div>100</div></li><li id="item_=14"><div>200</div></li><li id="item_=15"><div>500</div></li><li id="item_=16"><div>700</div></li><li id="item_=17"><div>1000</div></li><li id="item_=18"><div>2000</div></li><li id="item_=19"><div>3000</div></li><li id="item_=27"><div>Unlimited</div></li> </ul>
</div>
<div id="Final">
<ul id="sortable_end" class="connectedSortable ui-helper-reset">
</div>
我可以将模型中的东西拖到分钟,我想限制它,所以只有事情可以拖到最后。并且最好只有两个标签中的一个项目。
谢谢你们