Как я могу ограничить выбираемые элементы, используя JQuery UI selectable? - PullRequest
Новая
       11

Как я могу ограничить выбираемые элементы, используя JQuery UI selectable?

2 голосов
/ 29 января 2012

Так хорошо. Допустим, у меня есть следующий фрагмент: 

<div id="container">
    <div class="content" >A</div>
    <div class="content" >B</div>
    <div class="content" >C</div>
    <div class="content" >D</div>
    <div class="content" >E</div>
    <div class="content" >F</div>
</div>

Теперь, допустим, я выполнил: 

$('.content').selectable( {} );

Моя дилемма:

Скажем, всякий раз, когда я перетаскиваю и, таким образом, появляется инструмент лассо, я хочу, чтобы было выбрано только 4 деления - я все еще могу расширить лассо после того, как выбрал 4, но не следует выбирать последующие деления, над которыми парение лассо , Так скажем, взгляды divs слева направо,

A B C D E F

Лассо начинается в точке A, и я перемещаю его вправо - при покрытии D, чтобы оно достигло предела 4 - когда я наводю курсор мыши на E и F, их нельзя выбирать сейчас.

1 Ответ

4 голосов
/ 30 января 2012

Свяжите с выбранным событием и отмените его, если уже есть 4 выбранных элемента. 

$( "#selectable" ).selectable({
   selecting: function(event, ui) { 
     if ($(".ui-selected, .ui-selecting").length > 4) {
       $('.ui-selecting').removeClass("ui-selecting");
     }
   }
});

Редактировать: Исправленный фрагмент кода, поскольку я только что получил удар с iPad.Вот рабочая jsfiddle того, что вы хотите, а также: http://jsfiddle.net/fordlover49/MRphL/

...