0

Scriptaculous Draggable /Droppable スクリプトを使用していますが、スクロール div にドラッグするときに問題が発生します。私は次のレイアウトを持っています(この質問に基づいて):

#grid-container   { left:33px; position:relative; width:300px; }
#grid   { width:310px; height:400px; overflow:auto; margin-bottom: 15px; }
#grid-container ul   { width:400px; list-style-type:none; white-space: nowrap; }
#grid-container li   { display:inline; list-style-type:none; padding:5px 15px 5px 15px; height:88px; text-align:center }

.image-row   { margin-left: 10px; }
.grid-image   { height:50px; margin-left:-20px;  }

html は次のとおりです。

<div id="grid-container">
  <div id="grid"> 
    <div id="row1" class="image-row"> 
      <ul> 
        <li><img id="img1" class="grid-image" src="images/img1.jpg"></li>
        <li><img id="img2" class="grid-image" src="images/img2.jpg"></li>
        <li><img id="img3" class="grid-image" src="images/img3.jpg"></li>
        <li><img id="img4" class="grid-image" src="images/img4.jpg"></li>
      </ul>
    </div>
    <div id="row2" class="image-row"> 
      <ul> 
        <li><img id="img5" class="grid-image" src="images/img5.jpg"></li>
        <li><img id="img6" class="grid-image" src="images/img6.jpg"></li>
      </ul>
    </div>
  </div>
</div>

ドラッグ可能なアイテムを持つ別の div がありますが、すべての img 要素はドロップ可能です。これはほとんどの場合に非常にうまく機能しますが、グリッドの画像が多すぎてスクロールする必要がある場合、問題が発生します。その div のほとんどの項目にドラッグ アンド ドロップできますが、下にスクロールしてリストの一番下にある項目にドラッグしようとすると、div をスクロールする前に一番下にあった行にドロップされます。

Draggable アイテムの作成時に scroll 属性を設定しても、グリッド div はスクロールされますが、適切な Droppable アイテムは使用されません。

含まれている div がスクロールされているかどうかに関係なく、Draggable アイテムを適切な Droppable 要素にドロップする方法はありますか?

4

1 に答える 1

1

昨日、同じ問題が発生したときに、このドラッグドロップの問題をスクロールディビジョンで見つけました。基本的に解決策は、Position.includeScrollOffsets = true; を追加することです。あなたのコードに。

それが役に立てば幸い

于 2011-01-26T03:23:20.837 に答える