Вопрос:

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

javascript jquery html jquery-ui extjs

1383 просмотра

4 ответа

87 Репутация автора

Кто-нибудь знает, как сделать множественный выбор (см. Ниже 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>
Автор: Moses Ting Источник Размещён: 07.07.2010 11:37

Ответы (4)


1 плюс

662 Репутация автора

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

Автор: tomit Размещён: 07.07.2010 11:40

1 плюс

452647 Репутация автора

Решение

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

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

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

Автор: bobince Размещён: 08.07.2010 12:03

1 плюс

1329 Репутация автора

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

    <!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>
Автор: Anjuman Размещён: 22.06.2012 10:17

0 плюса

310 Репутация автора

Что я мог бы найти для этого:

jshjohnson / Выбор

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

? selectize / selectize.js

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

Автор: aexl Размещён: 12.06.2019 02:23
Вопросы из категории :
32x32