jQuery перетаскиваемая и сбрасываемая проблема - PullRequest
Новая
       4

jQuery перетаскиваемая и сбрасываемая проблема

0 голосов
/ 27 ноября 2010

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

Первый: У меня есть два деления.Один - <div id="selected">, а другой - <div id="container">.«Контейнер» имеет 30 <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>29</li>
             <li>30</li>
    </ul>
</div>

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

т.е. $("#container li").draggable({ revert: true }); Вот код JavaScript для этого.1021 * Это работает нормально.

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

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

Ответы [ 2 ]

1 голос
/ 27 ноября 2010

Я бы предложил использовать сортируемые, потому что они как-то похожи на draggables и droppables на обоих div.

Это не очень сложно с сортируемыми, есть событие приема.Наблюдайте за этим событием и посчитайте li внутри #selected, если их больше, чем разрешено, вы можете отменить текущую сортировку.

Fiddle: http://jsfiddle.net/doktormolle/K7kDz/

0 голосов
/ 27 ноября 2010

first - Я полагаю, вы должны сделать UL сбрасываемым вместо DIV, в противном случае вы LI окажетесь вне UL (вы можете задать стиль UL для заполнения всего DIV, поэтому он все равно будетвызвать сбрасываемую часть, когда элемент находится над ней) 

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

секунда и третья - у вас есть часть ELSE, в которой вы устанавливаете возвращение к ложному закомментированному ...только для этого примера или вы забыли комментарий там?(что может быть причиной того, что это не работает) 

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

также - вы пробовали Firebug , чтобы проверить, действительно ли у вас нет этих LI в выбранном DIV, как только вывытащить их?

...