Создание сортируемого элемента управления множественным выбором - PullRequest
Новая
       6

Создание сортируемого элемента управления множественным выбором

1 голос
/ 08 июля 2010

Кто-нибудь знает, как сделать множественный выбор (см. Ниже HTML) сортируемым? Используете jQuery или Ext JS? Под сортируемым я подразумеваю, что я могу перетащить элемент (параметр) вверх или вниз, чтобы изменить положение элемента управления select. 

<select id="testing" multiple=multiple>
    <option>First Option</option>
    <option>Second Option</option>
    <option>Third Option</option>
    <option>Forth Option</option>
    <option>5 Option</option>
    <option>6 Option</option>
    <option>7 Option</option>
</select>

Ответы [ 4 ]

2 голосов
/ 08 июля 2010

Вы не можете сделать это надежно с помощью перетаскивания. <select multiple> может быть реализовано с использованием виджета списка выбора ОС, который обычно не генерирует mouse событий, как это делают нативные элементы HTML.

Вам придется заменить <select> на загрузку <div> аналогов для него, которые обеспечивают сортируемость обычным способом, какую бы библиотека / плагин вы не использовали для этого. Довольно сложно сделать ersatz- <select> хорошо доступным / пригодным для использования / клавиатурным; большинству плагинов не удается полностью.

Более простой альтернативой было бы просто иметь отдельные кнопки «Переместить вверх» / «Переместить вниз», которые находят и перемещают выбранные <option> s в элементе.

1 голос
/ 12 июня 2019

✅✅ selectize / selectize.js

Это может быть прикреплено к тексту (freetagging), а также для выбора.У меня есть плагины drag_drop и remove_button. 

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.css" />
<script>
$(function() {
	$('select').selectize({
      plugins: ['remove_button', 'drag_drop']
  });
});
</script><select multiple>
<option value ="1">One</option>
<option value ="2" selected>Two</option>
<option value ="3" selected>Three</option>
</select>

✅ jshjohnson / Choices

Может быть присоединен к элементу выбора и имеет опцию упорядоченный который затем переписывает порядок выбора опций.Таким образом, ваш выбор возвращается в том порядке, в котором вы их выбрали.Перетаскивание невозможно, хотя не будет реализовано .

Другие библиотеки, которые показывают порядок выбора в пользовательском интерфейсе, но не допускают перетаскивания и не кажутсяизмените выбор соответственно

Другие библиотеки выбора, которые сортируют свои параметрыи не соблюдайте порядок в первую очередь

Неизвестно, но маловероятно

1 голос
/ 22 июня 2012

Я получил решение из Интернета после некоторого изучения и поиска. Пожалуйста, попробуйте следующее - 

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#move-up').click(moveUp);
        $('#move-down').click(moveDown);
    });

    function moveUp() {
        $('#selected-items select :selected').each(function(i, selected) {
            if (!$(this).prev().length) return false;
            $(this).insertBefore($(this).prev());
        });
        $('#selected-items select').focus().blur();
    }

    function moveDown() {
        $($('#selected-items select :selected').get().reverse()).each(function(i, selected) {
            if (!$(this).next().length) return false;
            $(this).insertAfter($(this).next());
        });
        $('#selected-items select').focus().blur();
    }
    </script>
    </head>
    <body>
    <div id="selected">
        <div><strong>Selected</strong></div>
        <div id="selected-items">
            <select multiple="multiple" id="selected_fields" name="selected_fields[]">
                <option>one</option>
                <option>two</option>
                <option>three</option>
                <option>four</option>
            </select>
        </div>
    </div>

    <div id="priority">
        <div><input type="button" id="move-up" value="UP" /></div>
        <div><input type="button" id="move-down" value="DOWN" /></div>
    </div>
    </body>
    </html>
1 голос
/ 08 июля 2010

В jQuery UI есть функции для сортировки.Смотри http://jqueryui.com/demos/sortable/.

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

Нет похожих вопросов

...