2

我開始了這方面的工作拖放例如herejQuery的UI。故障使用「拖拽」,「排序」和「標籤」一起

但是當我嘗試把標籤(Here)內下降的區域似乎打破它的偉大工程。當我嘗試在「可排序2」選項卡上放置項目時,它停止工作。

希望這是有道理的。

的HTML看起來像這樣:

<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(); 

回答

2

看起來有什麼不對的jQuery 1.4和/或jQuery的UI 1.8。如果你玩這個:

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

它用了jQuery 1.4.4和1.8.7的用戶界面,你會看到,你所看到的(即你有同樣的奇怪的行爲在切換選項卡之前與可排序的對象進行交互,然後再拖放'''')。但是,如果切換到的jQuery 1.7.1和UI 16年8月1日:

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

一切似乎很好地工作。因此,請升級您的出路。

我也切換拖動到<div>以避免產生無效的HTML,但這並不影響奇怪的行爲。我也class="draggable"代替你id="draggable"來,再次,避免無效的HTML,但這並不影響任何的錯誤行爲。

+0

美麗!認爲這將是一個艱難的。謝謝! – RayLoveless 2012-01-12 17:02:05