爲什麼不能從句柄拖動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可排序元素？

回答

相關問題