Utilisez le dojo glisser et tomber avec le dojo mobile

Question

J'utilise dojo.dnd pour transférer des éléments entre les zones. Le problème est: les articles se mettent en place une fois que je les laisse tomber, mais j'aimerais les faire rester où je les laisse tomber, mais seulement pour un seul domaine.

Voici un petit code pour mieux expliquer cela:

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

"Dropzone" est une div qui contient deux dojo.dnd.Source-areas, "itemNodes" (créé par programmation) et "TargetZone". Les éléments (Divs avec des images) doivent être traînés à partir d'une simple liste de "ItemNodes" dans "TargetZone" et rester où ils sont abandonnés. Dès qu'ils sont traînés hors de "TargetZone", ils devraient revenir à la liste à l'intérieur de "itemnodes".

Voici le code que j'utilise pour créer les éléments:

  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}

Mais de cette façon, je n'ai que deux listes d'articles, les articles déposés dans "TargetZone" ne resteront pas là où je les ai laissés tomber. J'ai essayé une boucle dojo.query(".dojoDndItem").forEach(function(node) Pour saisir tous les articles et les changer en un type "mobile":

• utilisant dojo.dnd.move.constrainedMoveable changera les articles pour qu'ils puissent toujours être déplacé (même dans "itemnodes")
• utilisant dojo.dnd.move.boxConstrainedMoveable Et la définition de la "boîte" aux bordures de "TargetZone" permet de simplement déplacer les éléments à l'intérieur de "TargetZone", mais dès que je les laisse tomber, je ne peux pas les saisir et les retirer. (Étrange: dojo.connect(node, "onMoved" Ne fonctionne pas ici, le même ne tire pas, quoi qu'il arrive.)

Voici donc la question: est-il possible de créer deux DND.
Ou y a-t-il une solution de contournement comme rendre les éléments mobiles et s'ils ne sont pas déposés dans "TargetZone", ils seront remis automatiquement à la liste dans "itemNodes"?

Une fois la page soumise, je dois enregistrer la position de chaque élément qui a été placé dans "TargetZone". (La prochaine étape sera de positionner les éléments à l'intérieur de "TargetZone" sur le chargement de la page si la grille a déjà été remplie auparavant, mais je serais heureux de faire fonctionner la chose en premier lieu.)

Tout indice est apprécié.

Salutations, select0r

Answer 1

Il n'y a pas de prise en charge directe pour de telles fonctionnalités. Cela peut être fait avec un code personnalisé, par exemple, en sous-classant un Source et remplacer son insertNodes().

Answer 2

Voici une solution de contournement rapide pour que cela fonctionne:

J'ai fini par utiliser une seule div qui est un dojo.dnd.Source et contient les éléments qui doivent être déposés dans un "dropzone" et se déplacent dedans tout en reprenant la liste des éléments lorsqu'ils sont placés à l'extérieur du dropzone.

Tous les articles sont un dojo.dnd.move.parentConstrainedMoveable pour les rendre mobiles dans la div d'origine. Connexion à onMoveStop me donnera l'occasion de décider si le "drop" s'est produit dans le dropzone ou ailleurs.

  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 et dropAreaY contiennent les coordonnées où commence le dropzone, dropAreaW et dropAreaH contiennent sa largeur et sa hauteur.

Si "OK!", Les articles seront enregistrés dans un tableau, donc je sais quels articles ont été abandonnés. Sinon, l'élément sera supprimé de ce tableau (s'il est là) et l'élément sera remis dans la liste (via CSS "gauche: 0"). Le nombre d'éléments dans le tableau me dira combien d'éléments restent dans la liste, donc je peux les "empiler" dans une boucle en utilisant "Top: NumberOfElement * hauteur Ofelement PX").

Il y a plus car j'ai besoin des coordonnées des éléments écrites dans des champs cachés, mais je suppose que cela devrait amener toute personne qui travaille sur un problème similaire sur la bonne voie.