4

这是我的演示：http: //jsfiddle.net/michelejs/PeS2D/560/

我怎样才能阻止第一个<li>被拖动？

$(document).ready(function(e) {
$('li').removeClass('ui-corner-bottom');
$('ul')
    .addClass('ui-corner-top')
    .removeClass('ui-corner-all')
    .sortable({
        'containment': 'parent',
        'opacity': 0.6,
        update: function(event, ui) {
            alert("dropped");
        }
    });
});​

非常感谢。

4

5 回答 5

5

items您可以在.sortable()小部件方法中使用该选项。结合 jQuery 选择器gt()，您可以轻松获得所需的内容。

这对我有用（jsFiddle 示例）：

$(document).ready(function(e) {
    $('li').removeClass('ui-corner-bottom');
    $('ul')
        .addClass('ui-corner-top')
        .removeClass('ui-corner-all')
        .sortable({
            'items': '>li:gt(1)',
            'containment': 'parent',
            'opacity': 0.6,
            update: function(event, ui) {
                alert("dropped");
            }
        });
});​
于 2012-11-15T13:36:14.490 回答
5

您可以使用该items属性：

$(document).ready(function(e) {
    $('li').removeClass('ui-corner-bottom');
    $('ul')
        .addClass('ui-corner-top')
        .removeClass('ui-corner-all')
        .sortable({
            items: 'li:not(:first)',
            'containment': 'parent',
            'opacity': 0.6,
            update: function(event, ui) {
                console.log(ui)

            }
        });
});

http://jsfiddle.net/ppRJL/

于 2012-11-15T13:33:42.603 回答
2

尝试这个。 http://jsfiddle.net/PeS2D/561/

我在第一个 li 中添加了一个名为 header 的额外类，然后有一个名为cancel

节省人们的点击：

[取消] 如果您从匹配选择器的元素开始，则阻止排序。代码示例：使用指定的取消选项初始化可排序：

$( ".selector" ).sortable({ cancel: "a,button" });

初始化后获取或设置取消选项：

// getter
var cancel = $( ".selector" ).sortable( "option", "cancel" );

// setter
$( ".selector" ).sortable( "option", "cancel", "a,button" );
于 2012-11-15T13:29:20.957 回答
1

只需阅读文档：http ://api.jqueryui.com/sortable/#option-items

该items选项允许您为可排序元素指定选择器。

于 2012-11-15T13:29:27.687 回答
1

小提琴：http: //jsfiddle.net/PeS2D/562/

你可以设置成这样

$(document).ready(function(e) {
  $('li').removeClass('ui-corner-bottom');
  $('ul')
    .addClass('ui-corner-top')
    .removeClass('ui-corner-all')
    .sortable({
        'containment': 'parent',
        'opacity': 0.6,
        update: function(event, ui) {
            alert("dropped");
        },
    items: 'li[id!=heading]'  
    });
});​

然后添加一个id到你的第一个 li

 <li data-role="list-divider" role="heading" id="heading">Re-order</li>
于 2012-11-15T13:33:24.743 回答