限制连接的可排序选项

时间:2012-05-01 21:28:01

标签: javascript jquery html drag jquery-ui-sortable

我有一个标签式可排序列表系统。但是,我无法限制可以拖入哪个选项卡的内容。

我现在的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>

我可以将模型中的东西拖到分钟,我想限制它,所以只有事情可以拖到最后。并且最好只有两个标签中的一个项目。

谢谢你们

0 个答案:

没有答案