Dojo Moveableと一緒にDojoのドラッグアンドドロップを使用してください

StackOverflow https://stackoverflow.com/questions/2551742

  •  23-09-2019
  •  | 
  •  

質問

Dojo.dndを使用して、エリア間でアイテムを転送しています。問題は次のとおりです。アイテムはドロップすると所定の位置にスナップしますが、ドロップする場所に留まらせたいと思いますが、1つの領域のみです。

これをよりよく説明するための小さなコードがあります：

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

「Dropzone」は2つのDivです dojo.dnd.Source-areas、「itemnodes」（プログラムで作成された）および「ターゲットゾーン」。アイテム（画像付きの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 そして、「box」を「ターゲットゾーン」の境界線に定義すると、アイテムを「ターゲットゾーン」内に移動することが可能になりますが、ドロップするとすぐに、つかんで戻すことはできません。 （変： dojo.connect(node, "onMoved" ここでは動作しません、何があっても偶然は発砲しません。）

質問は次のとおりです。2つのdnd.Sourcesを作成して、アイテムを前後に移動して、ソースの1つでのみアイテムを「可動」にすることができますか？
または、アイテムを移動可能にするような回避策があり、それらが「ターゲットゾーン」にドロップされない場合、「itemnodes」のリストに自動的に移動しますか？

ページが送信されたら、「ターゲットゾーン」に配置されたすべてのアイテムの位置を保存する必要があります。 （次のステップは、グリッドが以前に埋められていた場合、ページの読み込みに「ターゲットゾーン」内のアイテムを配置することですが、そもそも作業を手に入れることができてうれしいです。）

どんなヒントも感謝しています。

挨拶、select0r

役に立ちましたか？

解決

このような機能に対する直接的なサポートはありません。サブクラス化することにより、カスタムコードで実行できます Source そしてそれを無効にします insertNodes().

他のヒント

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

私は最終的に1つのdivだけを使用することになりました dojo.dnd.Source また、「ドロップゾーン」に落とす必要があるアイテムが含まれており、ドロップゾーンの外側に配置されたときにアイテムリストに戻って戻ってきています。

すべてのアイテムはaです dojo.dnd.move.parentConstrainedMoveable 原産地で移動可能にするため。接続 onMoveStop 「ドロップ」がドロップゾーンで発生したのか、どこかで発生したかどうかを判断する機会を与えてくれます。

  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 ドロップゾーンが始まる座標を含む、 dropAreaW と dropAreaH 幅と高さが含まれています。

「OK！」の場合、アイテムは配列に保存されるため、どのアイテムが削除されたかがわかります。それ以外の場合、アイテムはその配列（そこにある場合）から削除され、アイテムはリストに戻されます（CSS "left：0"を介して）。配列内の要素の数は、リストに残っている要素の数を教えてくれます。そのため、「Top：numberofelement * heightofelement px」を使用してループで「積み重ねる」ことができます。

Hidden Fieldsに書かれたアイテム座標が必要なので、さらに詳しく説明しますが、これにより、正しい軌道上で同様の問題に取り組んでいる人がいるはずです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top