<div id="selected"><ul class="可排序列表"></ul></div><div id="容器"><ul class="可排序列表"><li>1</li><li>2</li><li>....</li><li>9</li><li>10</li></ul></div>

第二:我想允許任何 5 個 <li>s 從容器"到選定"div.如果有人試圖添加第 6 個 <li>，那么它一定不允許用戶添加它.即第 6 個 <li> 必須使用 jQuery 可拖動選項 revert.

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

$(document).ready(function(){變量總計 = 0;$("#selected").droppable({下降:函數(){總計 = $("#selected li").length;//警報(總計)；如果(總數> = 5){$("#container li").draggable({ revert: true });} 別的 {//下面的代碼不工作$("#container li").draggable({ revert: false });//這讓整個功能變得很奇怪.我可以拖動所有的<li>任何地方}}});});

這工作正常.

第三:但是當我將一個 <li> 從selected"拖到container"時，selected"div 將只有 4 個 <li>s.所以在這種情況下，稍后用戶應該能夠將另一個 <li> 從容器" div 添加到選定" div 中.但不幸的是，它不起作用.由于 if (total >= 5 ) 條件，我嘗試拖放到已選擇"中的所有 <li> 都將被還原.

誰能幫我解決這個問題，使用 draggable revert 選項?請...

你可以使用accept 選項，它需要一個函數來更容易地做到這一點，像這樣:

$("#selected ul").droppable({接受:函數(){return $("#selected li").length <5個；}});

你可以在這里測試一下.當您將元素拖出時，.length 會下降，它會再次接受元素...沒有理由變得更復雜:)

I am having an issue related jQuery draggable and droppable. Here is description something what I want to do.

First: I have two divs. One is <div id="selected"> and another is <div id="container">. "container" has 10 <li> which are draggable and droppable into "selected". Here is code:

<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>9</li>
             <li>10</li>
    </ul>
</div>

Second: I want to allow any 5 <li>s from "container" to "selected" div. If someone tries to add 6th <li>, then it must not allow user to it. That is the 6th <li> that is going to be inserted into "selected" must be reverted using jQuery draggable option revert.

i.e. $("#container li").draggable({ revert: true }); Here is javascript code for that.

$(document).ready(function(){

    var total = 0;
    $("#selected").droppable({
        drop: function() {
                total = $("#selected li").length;
                //alert(total);
                if (total >= 5) {
                    $("#container li").draggable({ revert: true });
                } else {
                            // below code is not working
                    $("#container li").draggable({ revert: false }); // this is making whole feature weird. I can drag all the <li> anywhere
                }
            }
    });
});

This is working fine.

Third: But when I drag an <li> from "selected" to "container", the "selected" div will have only 4 <li>s. So in this situation, later on user should be able to add another <li> into "selected" div from "container" div. But unfortunately it is not working. All the <li>s I try to drag and drop into "selected" are being reverted due to if (total >= 5 ) condition.

Can anyone help me to solve this out using draggable revert option? Please...

You can use the accept option which takes a function to do this much easier, like this:

$("#selected ul").droppable({
    accept: function() {
        return $("#selected li").length < 5;
    }
});

You can test it out here. When you drag elements out, the .length goes down and it'll accept elements again...no reason to get any more complicated :)

這篇關于基于條件的jQuery可拖動還??原的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！