0

Dojo.dnd を使用して、エリア間でアイテムを転送しています。問題は、アイテムをドロップすると所定の位置にスナップされますが、アイテムをドロップした場所にとどめておきたいのですが、1 つの領域だけです。

これをよりよく説明するための小さなコードを次に示します。

  <div id="dropZone" class="dropZone">
    <div id="itemNodes"></div>
    <div id="targetZone" dojoType="dojo.dnd.Source"></div>
  </div>

dojo.dnd.Source「dropZone」は、「itemNodes」(プログラムで作成) と「targetZone」の2 つの領域を含む DIV です。アイテム (画像を含む DIV) は、単純なリストから「itemNodes」から「targetZone」にドラッグし、ドロップされた場所に留まる必要があります。それらが「targetZone」からドラッグされるとすぐに、「itemNodes」内のリストにスナップバックする必要があります。

アイテムの作成に使用するコードは次のとおりです。

  var nodelist = new dojo.dnd.Source("itemNodes");
  {Smarty-Loop}
    nodelist.insertNodes(false, ['<img class="dragItem" src="{$items->info.itemtext}" alt="{$items->info.itemtext}" border="0" />']);
  {/Smarty-Loop}

しかし、この方法ではアイテムのリストが 2 つしかないため、「targetZone」にドロップされたアイテムは、ドロップした場所にとどまりません。dojo.query(".dojoDndItem").forEach(function(node)すべてのアイテムを取得して「可動」タイプに変更するループを試しました。

  • を使用dojo.dnd.move.constrainedMoveableするとアイテムが変更され、いつでも移動できるようになります (「itemNodes」でも)。
  • 「ボックス」を使用しdojo.dnd.move.boxConstrainedMoveableて「targetZone」の境界に定義すると、「targetZone」内でアイテムを移動するだけで済みますが、アイテムをドロップするとすぐに、アイテムをつかんで元に戻すことができません。(奇妙な:dojo.connect(node, "onMoved"ここでは機能しません。イベントは何があっても発火しません。)

ここで質問があります。項目を前後に移動できる 2 つの dnd.Sources を作成し、項目を一方のソースでのみ「移動可能」にすることは可能ですか?
または、アイテムを移動可能にするなどの回避策はありますか?それらが「targetZone」にドロップされていない場合、それらは「itemNodes」のリストに自動的に戻されますか?

ページが送信されたら、「targetZone」に配置されたすべてのアイテムの位置を保存する必要があります。(次のステップは、グリッドが既に満たされている場合、ページの読み込み時に「targetZone」内にアイテムを配置することですが、最初から機能させることができれば幸いです。)

どんなヒントでも大歓迎です。

こんにちは、Select0r

4

2 に答える 2

0

これを機能させるための簡単な回避策は次のとおりです。

結局、「dropZone」にドロップする必要のあるアイテムを含むDIVを1つだけ使用しdojo.dnd.Source、dropZoneの外に配置したときにアイテムリストにスナップバックしながら移動しました。

すべてのアイテムはdojo.dnd.move.parentConstrainedMoveable、元のDIVで移動できるようにするためのものです。に接続するonMoveStopと、「ドロップ」がdropZoneで発生したのか、それとも他の場所で発生したのかを判断する機会が得られます。

  if (coordX >= (dropCoords.l + dropAreaX)  &&
      coordX <= (dropCoords.l + dropAreaX + dropAreaW) &&
      coordY >= (dropCoords.t + dropAreaY) &&
      coordY <= (dropCoords.t + dropAreaY + dropAreaH))
  {
     // OK!
  }
  else
  {
    // outside, snap back to list
  }

dropAreaXそしてdropAreaY、dropZoneが開始する座標dropAreaWをdropAreaH含み、その幅と高さを含みます。

「OK！」の場合、アイテムは配列に保存されるので、どのアイテムがドロップされたかがわかります。それ以外の場合、アイテムはその配列から削除され（そこにある場合）、アイテムはリストに戻されます（CSS "left：0"を使用）。配列内の要素の数は、リストに残っている要素の数を教えてくれるので、「top：numberOfElement *heightOfElementpx」を使用してループ内でそれらを「スタック」できます。

アイテムの座標を非表示のフィールドに書き込む必要があるので、それだけではありませんが、これにより、同様の問題に取り組んでいる人は誰でも正しい方向に進むはずです。

于 2010-04-07T16:00:24.643 に答える
0

There is no direct support for such features. It can be done with a custom code, e.g., by subclassing a Source and overriding its insertNodes().

于 2010-03-31T22:36:01.440 に答える