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

我有一个页面将字段添加到伪造的表单中，以便用户在生成源代码之前可以查看它。为什么不能从句柄拖动jQuery UI可排序元素？

我试图给用户排序和排序表单中的字段的能力。我将jQuery用于我的ajax和动画，所以我决定使用jQuery UI进行排序。

我的领域被添加了dinamicly，所以我委托我所有的事件，并且我使用sortable('refresh');每次添加一个新的字段。

我的GUI具有字段选项的图标，所以我在sortable()方法中添加了handle选项，但它根本不能识别它！

这是有问题的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来解决问题。

来源

2011-02-08 Maher4Ever

所以这真的是一个难题，我认为这只是一个小问题，因为这是我第一次使用jQuery UI。 – Maher4Ever 2011-02-09 16:12:11

解决的办法是将我的手柄从button更改为a。似乎jQuery UI不喜欢语义标记！

来源

2011-02-09 17:34:10 Maher4Ever

看起来这是目前jQuery UI可排序的已知错误 - http://bugs.jqueryui.com/ticket/5926 – tsupe 2011-03-02 16:41:45

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

回答

相关问题