jQuery UI selectable widget multiple unselect с мышью перетащить

Я использую jQuery UI выбираемый виджет. Я видел решение на Is there a way to change event parameters in jQuery?, чтобы включить множественный выбор (с перетаскиванием мышью), который отлично работает. Теперь я пытаюсь получить подобную функцию, чтобы отменить выбор нескольких элементов, которые не работают.jQuery UI selectable widget multiple unselect с мышью перетащить

$('#selectlist').on("mousedown", function (e) { 
    e.metaKey = true; //multiple select true 
    //e.ctrlKey = true; 
}).selectable({ 
    filter: '.select-li', 
    selecting: function (event, ui) { 
     debugger; 
     //if ($(ui.selecting).hasClass('li-planned')) { 
     // $(ui.selecting).removeClass("ui-selecting"); 
     //} 
    }, 
    unselecting: function (event, ui) { 
     //if ($(ui.unselecting).hasClass('li-planned')) { 
     // $(ui.unselecting).removeClass("ui-unselecting").addClass('ui-selected'); 
     //} 
    }, 
    stop: function (event) { 
     //debugger; 
     //do some work here 
    } 
})

Я попытался выполнить несколько вариантов, но до сих пор я не могу его получить. Любая помощь будет оценена по достоинству.

источник

2016-12-29 sarojanand

Не могли бы вы опубликовать поддерживающий HTML тоже? – SaurabhM

Это может помочь - http://stackoverflow.com/questions/39853372/jquery-ui-selectable-do-not-unselect-fields-on-click-of-certain-element – Ankit

Вы можете просто сделать список вашего Выбирается

$("#selectlist").selectable();

Вы можете выбрать множественные на selectables без использования мыши вниз.

мыши перетащить
Нажатие Ctrl во время выбора.

На отменить выбор несколько (на основе выбора выше),

1.a. Выберите один, и все остальные будут отменять выбор
1.b. Выберите пустую область в списке (пробел между списком1 и списком2), и все будет отменять выбор
2. Нажатие Ctrl пока unselecting.

Смотреть демо JQuery-UI в http://jqueryui.com/selectable/#default

источник

2017-01-05 06:23:45 Henz

Демо-URL не поддерживает множественный unselect , Также, как я упоминал ранее, я хочу сохранить выделение, когда я снова нажимаю на списки. Вот почему я устанавливаю 'e.metaKey = true'. – sarojanand

$(function() { 
 
    $("#selectable").bind("mousedown", function(e) { 
 
    e.metaKey = true; 
 
    }).selectable(); 
 
    $("#selectable").selectable({ 
 
    selected: function(event, ui) { 
 
     if (!$(ui.selected).hasClass('selected-flag')) { 
 
     $(ui.selected).addClass('selected-flag'); 
 
     } else { 
 
     $(ui.selected).removeClass("ui-selected selected-flag"); 
 
     } 
 
    } 
 
    }); 
 
});

#feedback { 
 
    font-size: 1.4em; 
 
} 
 
#selectable .ui-selecting { 
 
    background: #FECA40; 
 
} 
 
#selectable .ui-selected { 
 
    background: #F39814; 
 
    color: white; 
 
} 
 
#selectable { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 60%; 
 
} 
 
#selectable li { 
 
    margin: 3px; 
 
    padding: 0.4em; 
 
    font-size: 1.4em; 
 
    height: 18px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all"> 
 
<script src="https://code.jquery.com/ui/1.8.5/jquery-ui.min.js"></script> 
 

 
<div class="demo"> 
 
    <ol id="selectable"> 
 
    <li class="ui-widget-content">Item 1</li> 
 
    <li class="ui-widget-content">Item 2</li> 
 
    <li class="ui-widget-content">Item 3</li> 
 
    <li class="ui-widget-content">Item 4</li> 
 
    <li class="ui-widget-content">Item 5</li> 
 
    <li class="ui-widget-content">Item 6</li> 
 
    </ol> 
 

 
</div>

Я создал решение here и также добавлен фрагмент кода в моем ответе. Здесь я добавил класс флага к элементам в событии select, чтобы идентифицировать позже, какие элементы были выбраны, а затем удалить как ui-selected, так и класс флага из них, что затем делает его невыделенным. Я думаю, это то, что вы ищете.

источник

2017-01-06 13:27:23

Спасибо за ваш ответ.Я делал то же самое после того, как сделал еще несколько исследований, но это похоже на хак, а не на постоянное решение. Вот почему я ставлю щедрость, чтобы, если есть встроенная функциональность, я могу использовать вместо вызова выбранного события и отменить выбор. – sarojanand

В этом вопросе вы сказали, что не смогли достичь этого –

Это похоже на правильное решение, я не знаю, что есть более «встроенный» способ выполнить это, а затем постучать в " выбранного "события. – Trevor

Я думаю, что Аминур ответил на ваш вопрос, основываясь на приведенной информации. Вероятно, я бы подумал, что вы были перед этим, прежде чем читать свои отзывы по его ответу.

Вот еще одно предложение. Это предложение в основном очищает все выбранные элементы, если пользователь начинает перетаскивать на уже выбранный элемент. Возможно, это то, что вам нужно, когда вы говорите, что хотите отменить выбор нескольких элементов.

$(function() { 
    $("#selectable").bind("mousedown", function(e) { 
    if(e.target.className.indexOf('ui-selected') === -1){ 
     e.metaKey = true; 
    } 
    }).selectable(); 
});

Fiddle

источник

2017-01-09 22:24:01 Trevor

jQuery UI selectable widget multiple unselect с мышью перетащить

ответ

Смежные вопросы