jQuery可拖放問題

Question

我遇到與jQuery可拖放有關的問題。 這是我想要做的描述。

第一：我有兩個div。 一個是<div id="selected"> ，另一個是<div id="container"> 。 “容器”具有30個<li> ，它們可拖放到“ selected”中。 這是代碼：

<div id="selected">
    <ul class="sortable-list">
    </ul>
</div>


<div id="container">
    <ul class="sortable-list">
             <li>1</li>
             <li>2</li>
             <li>....</li>
             <li>29</li>
             <li>30</li>
    </ul>
</div>

第二：我想允許從“容器”到“選定” div的任何10個<li> 。 如果有人嘗試添加第11個<li> ，則它必須不允許用戶添加。 那就是將要插入“ selected”中的第11個<li>必須使用jQuery可拖動選項還原來還原。

即$("#container li").draggable({ revert: true }); 這是該代碼。

$(document).ready(function(){

    var total = 0;
    $("#selected").droppable({
        drop: function() {
                total = $("#selected li").length;
                //alert(total);
                if (total >= 10) {
                    $("#container li").draggable({ revert: true });
                } else {
                    //$("#container li").draggable({ revert: false });
                }
            }
    });
});

一切正常。

第三：但是當我將<li>從“ selected”拖到“ container”時，“ selected” div只有9個<li> 。 因此，在這種情況下，以后用戶應該可以將另一個<li>添加到“容器” div的“選定” div中。 但不幸的是，它不起作用。 由於if (total >= 10 )條件，我嘗試拖放到“ selected”中的所有<li>都已還原。

誰能幫我解決這個問題？ 請...

Answer 1

我建議使用sortables，因為它在某種程度上就像兩個div上的draggables和droppables一樣。

它不是很容易排序，有一個接收事件。 觀察此事件並計算#selected內li的數量，如果超出允許范圍，則可以取消當前排序。

小提琴： http : //jsfiddle.net/doktormolle/K7kDz/

Answer 2

首先 -我相信您應該使UL可以放置而不是DIV，否則您的LI將最終超出UL（您可以設置UL的樣式以填充整個DIV，因此當元素位於上方時，它仍然會觸發可放置部分它）

$("#selected ul.sortable-list").droppable({
    ......
});

第二和第三個 -您有ELSE部分，您將其中的設置恢復為false注釋掉了……是僅出於此示例，還是您忘記了那里的注釋？ （這就是為什么它不起作用的原因）

} else {
    // $("#container li").draggable({ revert: false });
}

另外-您是否曾經嘗試過Firebug來檢查您，一旦將它們拖出選定的DIV中就真的沒有這些LI？