Jquery-ui。 "ドラッグ可能な"、 "ソート可能な"、 "タブ"を一緒に使うことのトラブル

Question

私はこの作業ドラッグアンドドロップの例で始めましたhere。

しかし、私はタブ内にドロップ領域を配置しようとすると（Here）、それは壊れているようです。 「ソート可能な2」タブにアイテムをドロップしようとすると、動作を停止します。

希望はこれが理にかなっています。

<ul> 
    <li id="draggable" class="ui-state-highlight">Drag me down</li> 
</ul> 

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Sortable 1</a></li> 
     <li><a href="#tabs-2">Sortable 2</a></li> 
    </ul> 

    <div id="tabs-1"> 
    <div class="ui-state-default">Item 13</div> 
    <div class="ui-state-default">Item 23</div> 
    <div class="ui-state-default">Item 3</div> 
    <div class="ui-state-default">Item 4</div> 
    </div> 
    <div id="tabs-2"> 
    <div class="ui-state-default">Item 1</div> 
    <div class="ui-state-default">Item 2</div> 
    <div class="ui-state-default">Item 3</div> 
    <div class="ui-state-default">Item 4</div> 
    </div> 
</div> 

とJavaScript：

$("#tabs").tabs(); 

$("#tabs-1, #tabs-2").sortable({ 
    revert: true 
}); 
$("#draggable").draggable({ 
    connectToSortable: '#tabs-1, #tabs-2', 
    helper: 'clone', 
    revert: 'invalid' 
}); 
$("ul, li").disableSelection(); 

Answer 1

jQueryの1.4および/またはjQueryの-UI 1.8と間違って何かが見える

HTMLは次のようになります。あなたがこれで遊ぶ場合：jQueryの1.4.4と1.8.7 UIを使用しています

http://jsfiddle.net/ambiguous/jjmVt/

は、あなたはあなたが持っている、すなわちことを（見ていると同じ奇妙な行動が表示されますタブを切り替えた後にソート可能なものとやり取りしてから再度ドラッグすることができます）。あなたはjQueryの1.7.1と1.8.16 UIに切り替える場合でも：

http://jsfiddle.net/ambiguous/NRZ2U/

すべてが正常に動作するようです。だから、問題からあなたの方法をアップグレードしてください。

無効なHTMLが生成されるのを避けるため、draggableを<div>に変更しましたが、奇妙な動作には影響しません。 id="draggable"をclass="draggable"に置き換え、無効な​​HTMLを回避することもできますが、これはバグの動作にも影響しません。