Use Dojo Drag y suelte con Dojo Movible

Question

Estoy usando dojo.dnd para transferir elementos entre las áreas. El problema es: los elementos se encenderán una vez que los deje caer, pero me gustaría que se queden donde los dejo caer, pero solo para un área.

Aquí hay un pequeño código para explicar esto mejor:

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

"Dropzone" es un div que contiene dos dojo.dnd.Source-Abeas, "itemnodes" (creado programáticamente) y "TargetZone". Los elementos (divs con imágenes) deben arrastrarse desde una lista simple de "itemnodes" en "TargetZone" y quedarse donde se dejan caer. Tan pronto como se arrastren fuera de "TargetZone", deben volver a la lista dentro de "itemnodes".

Aquí está el código que uso para crear los elementos:

  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}

Pero de esta manera solo tengo dos listas de elementos, los elementos que se colocaron en "Targetzone" no se quedaron donde los dejé caer. He probado un bucle dojo.query(".dojoDndItem").forEach(function(node) Para agarrar todos los elementos y cambiarlos a un tipo "móvil":

• usando dojo.dnd.move.constrainedMoveable cambiará los elementos para que puedan siempre ser movido (incluso en "itemnodes")
• usando dojo.dnd.move.boxConstrainedMoveable Y definir la "caja" a las fronteras de "TargetZone" hace posible simplemente mover los elementos dentro de "TargetZone", pero tan pronto como los dejo, no puedo agarrarlos y retirarlos. (Extraño: dojo.connect(node, "onMoved" No funciona aquí, incluso no disparará, pase lo que pase).

Entonces, aquí está la pregunta: ¿es posible crear dos fuentes DND donde pueda mover elementos de un lado a otro y dejar que los elementos sean "móviles" solo en una de las fuentes?
¿O existe una solución al igual que hacer que los elementos sean movibles y si no se dejan caer en "TargetZone", se trasladarán a la lista en "itemnodes" automáticamente?

Una vez que se envía la página, tengo que guardar la posición de cada elemento que se ha colocado en "TargetZone". (El siguiente paso será colocar los elementos dentro de "TargetZone" en la carga de la página si la cuadrícula ya se ha llenado antes, pero estaría encantado de hacer que la cosa funcione en primer lugar).

Se agradece cualquier pista.

Saludos, select0r

Answer 1

No hay soporte directo para tales características. Se puede hacer con un código personalizado, por ejemplo, subclasificando un Source y anulando su insertNodes().

Answer 2

Aquí hay una solución rápida para que esto funcione:

Terminé usando solo un div que es un dojo.dnd.Source y contiene los elementos que deben dejarse caer en una "zona de caída" y moverse en él mientras vuelve a la lista de artículos cuando se colocan fuera de la zona de gota.

Todos los artículos son un dojo.dnd.move.parentConstrainedMoveable para hacerlos moverse en el div. Conectado a onMoveStop Me dará la oportunidad de decidir si la "caída" ha ocurrido en la zona de gota o en otro lugar.

  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 y dropAreaY contienen las coordenadas donde comienza la zona de gota, dropAreaW y dropAreaH contener su ancho y altura.

Si "está bien!", Los artículos se guardarán en una matriz, por lo que sé qué elementos se han eliminado. De lo contrario, el elemento se eliminará de esa matriz (si está allí) y el elemento se volverá a colocar en la lista (a través de CSS "Left: 0"). El número de elementos en la matriz me dirá cuántos elementos quedan en la lista, por lo que puedo "apilarlos" en un bucle usando "TOP: NumberOfElement * HeightOfElement PX").

Hay más, ya que necesito las coordenadas de elementos escritas en los campos ocultos, pero supongo que esto debería hacer que cualquiera que esté trabajando en un problema similar en el camino correcto.