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

Question

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

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

我的字段是动态添加的，所以我委托(delegate)了所有事件，每次添加新字段时我都使用 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:我能够通过将 handle 元素从 button 更改为 a 来解决问题。

Answer 1

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