Как я могу исправить свои методы jQuery, чтобы я мог переупорядочить элементы в элементе управления множественным выбором? - PullRequest
Новая
       4

Как я могу исправить свои методы jQuery, чтобы я мог переупорядочить элементы в элементе управления множественным выбором?

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

У меня есть селектор опций множественного выбора и кнопки вверх / вниз: 

<select id="animalSelector" multiple="multiple">
    <option>Elephant</option>
    <option>Duck</option>
    <option>Dog</option>
    <option>Giraffe</option>
    <option>Dinosaur</option>
    <option>Whale</option>
</select>

<input type="button" id="btnMoveUp" value="^ Up" />
<input type="button" id="btnMoveDown" value="v Down" />

Я хочу, чтобы пользователь мог выделять / выбирать несколько вариантов (используя клавишу CTRL), а затем иметь возможность перемещать свои выборы вверх и вниз.

Я получил удар: 

    $('#btnMoveUp').click(function (e) {
        moveUp();
        e.preventDefault();
    });

    $('#btnMoveDown').click(function (e) {
        moveDown();
        e.preventDefault();
    });

    function moveUp() {
        var allOptions = $('#animalSelector').find('option');
        allOptions.filter(':selected').each(function () {
            var newPosition = allOptions.index(this) - 1;
            if (newPosition > -1) {
                allOptions.eq(newPosition).before(this);
            }
        });
    }

    function moveDown() {
        var allOptions = $('#animalSelector').find('option');
        var count = allOptions.length;
        allOptions.filter(':selected').each(function () {
            var newPosition = allOptions.index(this) + 1;
            if (newPosition < count) {
                allOptions.eq(newPosition).after(this);
            }
        });
    }

Однако в IE7 это выглядит очень медленно / странно, и когда выбор начинает доходить до вершины, он выглядит странно.

Есть ли у кого-нибудь предложения о том, как лучше всего справиться с множественным выбором при движении вверх / вниз?

1 Ответ

1 голос
/ 13 ноября 2010 
function moveUp() {
    var select= $('#animalSelector')[0];
    for (var i= 1, n= select.options.length; i<n; i++)
        if (select.options[i].selected && !select.options[i-1].selected)
            select.insertBefore(select.options[i], select.options[i-1]);
}

function moveDown() {
    var select= $('#animalSelector')[0];
    for (var i= select.options.length-1; i-->0;)
        if (select.options[i].selected && !select.options[i+1].selected)
            select.insertBefore(select.options[i+1], select.options[i]);
}
...