1

jeditable/jquery を使用して、ユーザーがカテゴリとアイテムの名前を変更できる小さなページを作成しています。

スクリプトは機能しますが、Firefox での動作が少しおかしくなります。編集可能なスパンをダブルクリックすると、入力フィールドに置き換えられます。別の編集可能なスパンを除いて、他の要素に焦点を当てると消えます。また、カーソルが最初に入力ボックスに入ったときにカーソルが消えることにも注意してください。

入力フィールドを変更したい場合は、もう一度フォーカスを当ててから、別の場所をクリックする必要があります。

IEでは問題なく動作します。

ここに私のjquery定義があります：

$(document).ready(function(){
    //this will be executed once the dom is loaded

    $(".categories").sortable({
                                                    connectWith: ".categories",
                                                    dropOnEmpty: true,
                                                    tolerance: "pointer",
                                                    cancel: ".sections"
                                                    }).disableSelection();

    $(".sections").sortable({
                                                    connectWith: ".sections",
                                                    items: "li:not(.empty)",
                                                    dropOnEmpty: true
                                                    }).disableSelection();                              

    $(".section_edit").editable("serve_edit_section_request.php", { 
      tooltip: "Click to edit...",
      select: true,
      style: "inherit",
      cssclass: "edit_input_box",
      event: "dblclick",
      id: this.id,
      name: "section_name",
      onblur: "cancel"  
  })

  $(".category_edit").editable("serve_edit_category_request.php", { 
      tooltip: "Click to edit...",
      select: true,
      style: "inherit",
      cssclass: "edit_input_box",
      event: "dblclick",
      id: this.id,
      name: "category_name",
      onblur: "cancel"  
  })

});

そして私のリスト：

<ul class='categories'>
  <li id='1' class='category'><span id='edit_1' class='category_edit'>Category 1</span>
    <ul id='cat_1' class='sections'>    
      <li class='empty'></li>   
      <li id='20' class='section'><span id='edit_20' class='section_edit'>My Section 1</span></li>
    </ul>
  </li>
  <li id='2' class='category'><span id='edit_2' class='category_edit'>Category 2</span>
    <ul id='cat_2' class='sections'>    
      <li class='empty'></li>   
      <li id='21' class='section'><span id='edit_21' class='section_edit'>My Section 2</span></li>  
      <li id='22' class='section'><span id='edit_22' class='section_edit'>My Section 3</span></li>
    </ul>
  </li>
  <li id='3' class='category'><span id='edit_3' class='category_edit'>Category 3</span>
    <ul id='cat_3' class='sections'>    
      <li class='empty'></li>   
      <li id='23' class='section'><span id='edit_23' class='section_edit'>My Section 4</span></li>
    </ul>
  </li>
  <li id='4' class='category'><span id='edit_4' class='category_edit'>Category 4</span>
    <ul id='cat_4' class='sections'>    
      <li class='empty'></li>   
      <li id='809' class='section'><span id='edit_809' class='section_edit'>My Section 5</span></li>
    </ul>
  </li>
</ul>

(jquery の悪いタブ移動を許してください。散発的に表示される理由がわかりません)

助けてくれてありがとう！:)

4

1 に答える 1

1

私はこれとまったく同じ問題を抱えていました：

この問題は、disableSelection() によって引き起こされます。sortable() の一般的な使用法はテキストエリアを使用しないため、ほとんどの人は次の微妙な点に気付かないでしょう:

disableSelection() は FireFox の CSS 特性を使用するため、disableSelection() を適用したもののすべての子孫ですべての効果が感じられます。直接の子にのみ影響を与えたいので (sortable() が直接の子にのみ作用するように)、代わりにこれを行う必要があります。

$(".categories").sortable({
    connectWith: ".categories",
    dropOnEmpty: true,
    tolerance: "pointer",
    cancel: ".sections"
});
$(".categories > *").disableSelection();

また

$(".categories").sortable({
    connectWith: ".categories",
    dropOnEmpty: true,
    tolerance: "pointer",
    cancel: ".sections"
}).children().disableSelection();

（JQueryドキュメントから：「また注意してください：parents（）はすべての祖先を調べますが、children（）は直接の子要素のみを考慮します。」）

于 2010-01-15T17:04:23.013 に答える