jQuery перетаскиваемый возврат в зависимости от условия - PullRequest
Новая
       12

jQuery перетаскиваемый возврат в зависимости от условия

8 голосов
/ 29 ноября 2010

У меня есть проблема, связанная с jQuery, перетаскиваемым и сбрасываемым. Вот описание чего-то, что я хочу сделать.

Первый: У меня есть два деления. Один - <div id="selected">, а другой - <div id="container">. «Контейнер» имеет 10 <li>, которые можно перетаскивать в «выбранный». Вот код: 

<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>

Секунда: Я хочу разрешить любые 5 <li> s от "контейнера" ​​до "выбранного" div. Если кто-то пытается добавить 6-й <li>, он не должен допускать к нему пользователя. То есть 6-й <li>, который будет вставлен в «выбранный», должен быть возвращен с помощью перетаскиваемой опции jQuery revert .

т.е. $("#container li").draggable({ revert: true }); Вот код JavaScript для этого. 

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

Работает нормально.

Третье: Но когда я перетаскиваю <li> из «выбранного» в «контейнер», у «выбранного» элемента div будет только 4 <li> с. Таким образом, в этой ситуации позже пользователь сможет добавить еще один <li> в «выбранный» div из «контейнерного» div. Но, к сожалению, это не работает. Все <li> s, которые я пытаюсь перетащить в «выбранные», возвращаются из-за условия if (total >= 5 ).

Может кто-нибудь помочь мне решить эту проблему с помощью опции draggable revert ? Пожалуйста ...

Ответы [ 2 ]

17 голосов
/ 29 ноября 2010

Вы можете использовать accept параметр , который использует функцию, чтобы сделать это намного проще, например: 

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

Вы можете проверить это здесь . Когда вы перетаскиваете элементы, .length падает, и он снова принимает элементы ... нет причин усложнять:)

3 голосов
/ 29 ноября 2010

Прежде всего, установка revert в значение false полностью отключит функцию возврата.Как вы указываете, вы сможете бросить Draggables в любом месте.Обычно вы хотите revert: 'invalid', что означает, что он будет возвращаться всякий раз, когда он будет сброшен на что-либо, что не может быть сброшено на него.

То, что вы хотите сделать, должно выглядеть примерно так:* 

$('#selected').droppable({
    drop: function() {

       // since you're doing a full re-calc every time, this doesn't need to be global
       var total = $("#selected li").length;

       if(total >= 5) {

           // once you've reached five, simply don't accept any more elements
           // the rest will revert if dropped here
           $('#selected').droppable('disable');
       }
    }
});
...