Question

我有一个页面可以将字段添加到假表单中，以便用户在生成源代码之前查看它。

我试图让用户能够对表单中的字段进行排序和排序。我使用jQuery作为我的ajax和动画，所以我决定使用jquery UI进行排序。

我的字段被添加为dinamicly，因此我委托我的所有活动，每次添加新字段时都使用sortable('refresh');。

我的GUI有字段选项图标，因此我在handle方法中添加了sortable()选项，但它根本无法识别它！

这是一个带有问题的GUI的演示（它是阿拉伯语，仍然是alpha，因此没有IE7-6支持，但它使用图标，因此它很容易使用^^）：http://mahersalam.co.cc/projects/namodgMaker/

只需添加红色按钮中的任何字段，并尝试从拖动按钮拖动，它不起作用。如果我删除了handle，那就完美了！

您可以看到我将handle值记录到控制台，但它始终记录可排序对象...有一个全局对象NamodgMaker您想要试验它。

以下是添加字段并附加sortable()方法的部分：

addField: function( type ) {

    var $html = $(this.fields[type]); // 'this' here is NamodgMaker, and `fields` is from an ajax request

    if (type == 'select') {
        $html
            .find('select')
                .styleNamodgSelects({
                    optionsRight: -6,
                    optionsTop: 38
                });
    }

    $html.appendTo(this.formHolder);

    if ( this.formHolder.data('sortable') ) {

        this.formHolder.sortable('refresh');
        console.log( this.formHolder.sortable( "option", "handle" ) );
        return
    }

    this.formHolder
        .sortable({
            containment: 'parent',
            handle: '.drag-field-option'
        })
        .data('sortable', true)

    console.log( this.formHolder.sortable( "option", "handle" ) );
}

这是我第一次使用jQuery UI，那么我做错了什么？

更新：我发现$.data()导致sortable返回错误的选项。我修改了代码以使用sortable()自己的检查方法：

addField: function( type ) {

    var $html = $(this.fields[type]);

    if (type == 'select') {
        $html
            .find('select')
                .styleNamodgSelects({
                    optionsRight: -6,
                    optionsTop: 38
                });
    }

    $html.appendTo(this.formHolder);

    if ( ! this.formHolder.sortable( "option", "disabled")  ) {

        this.formHolder.sortable('refresh');
        console.log( 'refreshed :' + this.formHolder.sortable( "option", "handle" ) );
        return
    }

    this.formHolder
        .sortable({
            containment: 'parent',
            handle: '.drag-field-option'
        })


    console.log( this.formHolder.sortable( "option", "handle" ) );
}

现在控制台记录了正确的选择器，但仍然没有排序功能。

更新2 ：我可以通过将句柄元素从button更改为a来解决问题。

Answer 1

修复方法是将我的句柄从button更改为a。似乎jquery UI不喜欢语义标记！

为什么不能从句柄拖动jQuery UI可排序元素？

1 个答案: