jQuery意外排序的行爲

我正在開發一個項目，我可以生成Word文檔，其中一個功能是定義一個目錄。我希望我的TOC成爲排序章節的可排序jQuery列表。jQuery意外排序的行爲

我從一個MySQL表中遞歸地返回數據，這個表的功能和預期的一樣。由於我發現在IE7中有一些奇怪的行爲（以及其他可能的版本），我轉回到基礎知識，並在沒有任何DB生成結構的簡單HTML文件中嘗試以下內容。

<!doctype html> 
<html> 
<head> 
<script type="text/javascript" src="./jquery-1.3.2.js"></script> 
<script type="text/javascript" src="./ui/jquery-ui-1.7.2.custom.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
    $("ul.list").sortable({ 
     opacity: 0.7, 
     helper: 'clone', 
     cursor: 'move', 
     tolerance: 'pointer' 
    }); 
    $("ul.list").selectable(); 
    $("ul.list").disableSelection(); 
}); 
</script> 
<style type="text/css"> 
ul.list { 
    list-style:none; 
    padding:none; 
    margin:none; 
    border:1px solid #EFEFEF;} 
ul.list:hover { 
    border:1px dotted #333;} 
</style> 
</head> 
<body> 
    <ul class="list"> 
    <li>Chapter 1</li> 
    <li>Chapter 2 
     <ul class="list"> 
     <li>Chapter 2.1</li> 
     <li>Chapter 2.2</li> 
     </ul> 
    </li> 
    </ul> 
</body> 
</html>

有了這個源（不管能級的量），我希望每一個小節是其父章內的唯一排序列表。在FireFox中，它可以正常工作，但不幸的是，在工作中，IE7是默認的瀏覽器，無法進行切換。

有沒有人有一些建議該怎麼辦？

基本上我只是想重組列表和嵌套列表。此時，我只能拖動主章節，當我嘗試拖動子章節時，相應父項的整個列表結構將被拖動。因此，當我試圖拖拽'第2.2章'將它放在'第2.1章'的上方時，我實際上正在拖拽'第2章'，唯一的可能性是將它拖拽到'第1章'之上。

我希望我的問題很清楚。

Here's a Demo.添加/edit到URL查看代碼，並用它玩

來源

2009-11-24 Ben

增加了一個演示給你，讓人們可以在IE7看到問題 –

謝謝！我給你+1把一個在線演示。我在這裏支持數十個防火牆，所以我無法做到這一點。該演示確實可以完美地說明發生了什麼問題。 – Ben

@Russ Cam：jsbin很好:) – Xinus

只需添加這

$('ul.list').bind('mousedown', function(e) { 
    e.stopPropagation(); 
});

這將從mousedown事件冒泡到父ul，這會導致停止IE奇怪的可排序的行爲，你已經看到。現在，應該按預期工作

來源

2009-11-24 12:28:34 jitter

謝謝！這的確有竅門！ +1 +接受！再次感謝！ – Ben

男人，抖動，你剛剛救了我的一天！ +1 –

+1此外，我已經去了的修復。 –

jQuery意外排序的行爲

回答

相關問題