jQuery UIのソート可能な要素をハンドルからドラッグできないのはなぜですか？

Question

私は偽のフォームにフィールドを追加するページを持っているので、ユーザーはソースを生成する前にそれを見ることができます。

私はフォーム内のフィールドをソートして並べ替えることができます。私は、私のajaxとアニメーションのためにjQueryを使用しているので、jquery UIを使用してソートを行うことにしました。

私のフィールドはディナミックに追加されていますので、すべてのイベントを委任し、新しいフィールドが追加されるたびにsortable('refresh');を使用します。

私のGUIにはフィールドオプションのアイコンがありますので、オプションをsortable()メソッドに追加しましたが、それはまったく認識しません。ここで

が問題とGUIのデモである（それは^^アラビア語ませんし、まだアルファでそう何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が間違ったオプションを返すことが判明しました。

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

今コンソールは、右セレクターをログに記録しますが、それでも、ソート機能が働いていない：私はsortable()自身のチェック方法を使用するようにコードを変更しました。

更新2：ハンドル要素をbuttonからaに変更することで問題を解決できました。

Answer 1

解決方法は、ハンドルをbuttonからaに変更することでした。 jquery UIはセマンティックマークアップを好まないと思われます！