Question

我有一个包含两个列表的页面。左边的列表有一些“可选”项。右侧的列表是预填充所需项目的主列表。

用户应该能够在两个列表之间来回拖动可选项，以及在任一列表中对它们进行排序。

用户应该能够对主列表项（必需和可选）进行排序，但不能将所需项拖到可选列表中。

这有意义吗？实现这一目标的最佳方法是什么？

我已经尝试了使用jquery sortable执行此操作的不同方法，但似乎无法正确使用它。非常感谢任何帮助。

示例列表：

<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');
        }
    });
});

谢谢，贝

编辑了类型/语法错误。

Answer 1

this是常规JS。 hasClass()是一个jQuery函数，因此不适用于this。

试试这个（没有双关语）：$(this).hasClass('required')

演示：http://jsfiddle.net/2QMur/

Answer 2

好的，找到了解决方案：

 $(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');
        }
    });

请注意接收事件的更改以及我取消的更改。这将取消掉线。现在让它变得漂亮。 =）

我还通过删除逗号修复了为列表项指定的类。

Jquery Sortable - 必需项和可选项

2 个答案: