Question

这是我的演示：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");
        }
    });
});

非常感谢。

Answer 1

您可以使用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/

Answer 2

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

这对我有用（jsFiddle example）：

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

Answer 3

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

我在第一个li中添加了一个名为header的额外类，然后there is a function called cancel

为人们点击一下：

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

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

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

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

// setter
$( ".selector" ).sortable( "option", "cancel", "a,button" );

Answer 4

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

items选项允许您为sortables元素指定选择器。

Answer 5

小提琴：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 data-role="list-divider" role="heading" id="heading">Re-order</li>

首先停止<li>可拖动</li>

5 个答案: