Jquery Sortable - Обязательные и дополнительные предметы - PullRequest
Новая
       14

Jquery Sortable - Обязательные и дополнительные предметы

0 голосов
/ 05 января 2012

У меня есть страница с двумя списками.В списке слева есть несколько «необязательных» пунктов.Список справа - это основной список, который будет предварительно заполнен необходимыми элементами.

Пользователь должен иметь возможность перетаскивать необязательные элементы назад и вперед между двумя списками, а также сортировать их в любом списке.

Пользователи должны иметь возможность сортировать основные элементы списка (как обязательный, так и необязательный), но не должен иметь возможности перетаскивать необходимый элемент в необязательный список.

Имеет ли это смысл?Каков наилучший способ добиться этого?

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

Пример списка: 

<div id="Selector">
<ul id="OptionalFields" class='droptrue'>
    <li class="ui-state-highlight, optional">Optional 1</li>
    <li class="ui-state-highlight, optional">Optional 2</li>
    <li class="ui-state-highlight, optional">Optional 3</li>
    <li class="ui-state-highlight, optional">Optional 4</li>
</ul>
<ul id="FileFields" class='droptrue'>
    <li class="ui-state-default, required">Required 1</li>
    <li class="ui-state-default, required">Required 2</li>
    <li class="ui-state-default, required">Required 3</li>
</ul>

В настоящее время мой скрипт выглядит так: 

$(function () {
    $("#OptionalFields").sortable({
        containment: '#Selector',
        tolerance: 'pointer',
        connectWith: '#FileFields',
        cursor: 'pointer',
        revert: 'true',
        opacity: 0.6,
        receive: function () {
            if ($(this).hasClass("required")){ return false};
        }

    });

    $("#FileFields").sortable({
        containment: '#Selector',
        tolerance: 'pointer',
        connectWith: '#OptionalFields',
        cursor: 'pointer',
        revert: 'true',
        opacity: 0.6,
        update: function () {
            //alert('sorted');
        }
    });
});

Спасибо,Тони

отредактировал ошибку типа / синтаксиса.

Ответы [ 2 ]

1 голос
/ 06 января 2012

ОК, нашел решение: 

 $(function () {
    $("#OptionalFields").sortable({
        containment: '#Selector',
        tolerance: 'pointer',
        connectWith: '#FileFields',
        cursor: 'pointer',
        revert: 'true',
        opacity: 0.6,
        receive: function (event, ui) {
            if (ui.item.hasClass('required')) {
                $(ui.sender).sortable('cancel'); 
            };
        }

    });

    $("#FileFields").sortable({
        containment: '#Selector',
        tolerance: 'pointer',
        connectWith: '#OptionalFields',
        cursor: 'pointer',
        revert: 'true',
        opacity: 0.6,
        update: function () {
            //alert('sorted');
        }
    });

Обратите внимание на изменения в событии приема и на способ отмены. Это отменит падение. Теперь, чтобы сделать это красиво. =)

Я также исправил классы, указанные для элементов списка, удалив запятые.

1 голос
/ 05 января 2012

this это обычный JS. hasClass() является функцией jQuery, поэтому не применяется к this.

Попробуйте вместо этого (без каламбура): $(this).hasClass('required')

Демо: http://jsfiddle.net/2QMur/

...