Verwenden Sie Dojo Drag & Drop mit Dojo Moveable

Question

Ich verwende dojo.dnd, um Elemente zwischen Bereichen zu übertragen. Das Problem ist: Die Gegenstände werden einrasten, sobald ich sie fallen lässt, aber ich möchte, dass sie dort bleiben, wo ich sie fallen lasse, aber nur für einen Bereich.

Hier ist ein kleiner Code, um dies besser zu erklären:

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

"Dropzone" ist ein Div, das zwei enthält dojo.dnd.Source-Areas, "itemnodes" (programmatisch erstellt) und "TargetZone". Elemente (Divs mit Bildern) sollten aus einer einfachen Liste aus "itemnodes" in "targetZone" herausgezogen werden und dort bleiben, wo sie fallen gelassen werden. Sobald sie aus "TargetZone" herausgezogen werden, sollten sie in "itemnodes" zur Liste zurückgreifen.

Hier ist der Code, mit dem ich die Elemente erstelle:

  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}

Aber auf diese Weise habe ich nur zwei Elementlisten, die Artikel sind in "TargetZone" fallen, wo ich sie fallen ließ. Ich habe eine Schleife ausprobiert dojo.query(".dojoDndItem").forEach(function(node) um alle Gegenstände zu greifen und sie in einen "beweglichen" Typ zu ändern:

• Verwendung dojo.dnd.move.constrainedMoveable wird die Gegenstände ändern, damit sie können stets bewegt werden (sogar in "itemnodes")
• Verwendung dojo.dnd.move.boxConstrainedMoveable Und das Definieren der "Box" an den Grenzen von "TargetZone" ermöglicht es, die Gegenstände in "TargetZone" nur umzuziehen, aber sobald ich sie fallen lasse, kann ich sie nicht greifen und zurückziehen. (Seltsam: dojo.connect(node, "onMoved" Funktioniert hier nicht, das wird nicht feuern, egal was passiert.)

Hier ist also die Frage: Ist es möglich, zwei DND.Sources zu erstellen, in denen ich Elemente hin und her bewegen und die Elemente nur in einer der Quellen "beweglich" sein kann?
Oder gibt es eine Problemumgehung, wie die Gegenstände beweglich zu machen, und wenn sie nicht in "TargetZone" fallen gelassen werden, werden sie automatisch in die Liste "itemnodes" zurückgezogen?

Sobald die Seite eingereicht wurde, muss ich die Position jedes Elements speichern, das in "TargetZone" platziert wurde. (Der nächste Schritt wird darin bestehen, die Elemente in "TargetZone" auf der Seitenladung zu positionieren, wenn das Netz bereits zuvor gefüllt wurde, aber ich würde mich freuen, das Ding überhaupt zum Laufen zu bringen.)

Jeder Hinweis wird geschätzt.

Grüße, select0r

Answer 1

Es gibt keine direkte Unterstützung für solche Funktionen. Dies kann mit einem benutzerdefinierten Code, z. B. durch Unterklagen a Source und überschreiben seine insertNodes().

Answer 2

Hier ist eine kurze Problemumgehung, um dies zum Laufen zu bringen:

Am Ende habe ich nur ein Div verwendet, was a ist dojo.dnd.Source und enthält die Gegenstände, die in eine "Dropzone" fallen gelassen werden sollten und sich darin bewegen, während sie bei der Platzierung außerhalb der Dropzone zur Artikelliste zurückgeschnitten.

Alle Gegenstände sind a dojo.dnd.move.parentConstrainedMoveable um sie in der Ursprungsdiv beweglich zu machen. Verbinden mit onMoveStop Ich werde mir die Gelegenheit geben zu entscheiden, ob der "Drop" in der Dropzone oder woanders aufgetreten ist.

  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 und dropAreaY enthalten die Koordinaten, an denen die Dropzone beginnt, dropAreaW und dropAreaH Enthält seine Breite und Größe.

Wenn "OK!", Werden die Artikel in ein Array gespeichert, sodass ich weiß, welche Artikel fallen gelassen wurden. Andernfalls wird der Artikel aus diesem Array entfernt (wenn es dort ist) und das Element in die Liste zurückgegeben wird (über CSS "links: 0"). Die Anzahl der Elemente im Array zeigt mir, wie viele Elemente in der Liste übrig sind, sodass ich sie mit "Top: NumberoFelement * Hifelement PX" in einer Schleife "stapeln" kann.

Es gibt noch mehr da, da ich die in versteckten Feldern geschriebenen Artikelkoordinaten benötige, aber ich denke, dies sollte jeden dazu bringen, auf dem richtigen Weg an einem ähnlichen Problem zu arbeiten.