jQuery用戶界面可排序：根據具體的情況

Question

第一個問題，因此，請接受我的道歉，讓我知道如果有什麼這裏SO打破禮儀

我一個CMS頁面編輯表單正與可變數量的限制允許滴文件上傳字段，但爲了這個問題的目的，假設有4個上傳字段，稱爲插槽。每個插槽只能接受某些類型的文件，如：

1. 接受JPG，GIF & PNG
2. 接受png格式
3. 接受JPG，GIF & PNG
4. 接受PDF

我我想讓用戶重新排列上傳的文件，並使用jQuery UI的Sortable來完成此操作。這是我卡住的地方。拖動時，只能在具有相應文件類型的插槽中允許文件。因此，插槽1中的JPG文件只能移動到插槽3，而插槽3中的PNG文件可以移動到插槽1或插槽2中。插槽4中的pdf不應該被允許移動。

Here's a fiddle展示我的設置。

的jQuery：

$(".slots").sortable({ 
    cursor: "move", 
    placeholder: 'ui-state-highlight', 
    items: ".slot", 
    update: function (sorted) { 
    // ajax magic omitted for the sake of brevity. 
    } 
}); 

HTML：

<ul class="slots"> 
    <li class="slot accept-jpg accept-gif accept-png" id="sort_1"> 
    <div class="is-jpg">{jpg}</div> 
    </li> 
    <li class="slot accept-png" id="sort_2"> 
    <div class="is-png">{png}</div> 
    </li> 
    <li class="slot accept-jpg accept-gif accept-png" id="sort_3"> 
    <div class="is-empty"><input type="file" /></div> 
    </li> 
    <li class="slot accept-pdf" id="sort_4"> 
    <div class="is-pdf">{pdf}</div> 
    </li> 
</ul> 

任何想法/想法？預先感謝您嘗試幫助！

Answer 1

您可能嘗試連接已連接列表上的接收/結束事件。 請看這裏https://stackoverflow.com/a/14442218有類似的問題。

但我不知道你可能運行哪種邊緣情況。

看看這裏http://johnny.github.com/jquery-sortable/#limited-target爲另一個可排序的插件，讓您完全控制哪些容器接收下降。但由於它不支持網格，它可能不適合你。