Usa DOJO Trascinda e rilascia insieme a Dojo Moveable

Question

Sto usando dojo.dnd per trasferire gli articoli tra le aree. Il problema è: gli oggetti si scappano in posizione una volta lasciati cadere, ma mi piacerebbe che li rimanga dove li lasciamo cadere, ma solo per un'area.

Ecco un piccolo codice per spiegarlo meglio:

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

"Dropzone" è un div che contiene due dojo.dnd.Source-AREAS, "ItemNodes" (creato a livello di programmazione) e "TargetZone". Gli elementi (div con immagini) devono essere trascinati da un semplice elenco di "itemnodes" in "Targetzone" e rimanere dove vengono lasciati cadere. Non appena vengono trascinati fuori da "TargetZone", dovrebbero tornare all'elenco all'interno di "Itemnodes".

Ecco il codice che uso per creare gli elementi:

  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}

Ma in questo modo ho solo due elenchi di articoli, gli articoli lasciati in "TargetZone" non rimarranno dove li ho lasciati cadere. Ho provato un ciclo dojo.query(".dojoDndItem").forEach(function(node) Per prendere tutti gli articoli e cambiarli in un tipo "mobile":

• usando dojo.dnd.move.constrainedMoveable cambierà gli articoli in modo che possano sempre essere spostato (anche in "itemnodes")
• usando dojo.dnd.move.boxConstrainedMoveable E definire la "scatola" ai confini di "TargetZone" consente di spostare gli oggetti all'interno di "Targetzone", ma non appena li lasciamo cadere, non posso afferrarli e spostarli indietro. (Strano: dojo.connect(node, "onMoved" Non funziona qui, anche il non spara, non importa cosa.)

Quindi ecco la domanda: è possibile creare due DND.Sources in cui posso spostare gli oggetti avanti e indietro e lasciare che gli oggetti siano "mobili" solo in una delle fonti?
O esiste una soluzione alternativa come rendere mobili gli oggetti e se non vengono lasciati cadere in "TargetZone" verranno riportati automaticamente all'elenco in "ItemNodes"?

Una volta inviata la pagina, devo salvare la posizione di ogni elemento inserito in "TargetZone". (Il prossimo passo sarà posizionare gli elementi all'interno di "TargetZone" nel carico di pagina se la griglia è già stata riempita prima, ma sarei felice di far funzionare la cosa in primo luogo.)

Qualsiasi suggerimento è apprezzato.

Saluti, Select0r

Answer 1

Non esiste un supporto diretto per tali funzionalità. Può essere fatto con un codice personalizzato, ad esempio, sottoclasse a Source e prevalere insertNodes().

Answer 2

Ecco una soluzione rapida per far funzionare questo:

Ho finito per usare un solo div che è un dojo.dnd.Source e contiene gli oggetti che dovrebbero essere lasciati cadere in un "discesa" e si spostano in esso mentre si spezza nell'elenco degli oggetti se posizionati fuori dalla zona drop.

Tutti gli articoli sono un dojo.dnd.move.parentConstrainedMoveable per renderli mobili nel div di origine. Connessione a onMoveStop Mi darò l'opportunità di decidere se il "drop" è avvenuto nella zona di drop o da qualche altra parte.

  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 e dropAreaY contenere le coordinate in cui inizia la zona dropzone, dropAreaW e dropAreaH contenere la sua larghezza e altezza.

Se "OK!", Gli articoli verranno salvati in un array, quindi so quali articoli sono stati eliminati. Altrimenti l'articolo verrà rimosso da quell'array (se è lì dentro) e l'articolo verrà riportato nell'elenco (tramite CSS "a sinistra: 0"). Il numero di elementi nell'array mi dirà quanti elementi sono rimasti nell'elenco, quindi posso "impilarli" in un loop usando "Top: NumberOflement * HeightOflement px").

C'è di più perché ho bisogno delle coordinate degli articoli scritti su campi nascosti, ma immagino che questo dovrebbe far sì che chiunque stia lavorando su un problema simile sulla strada giusta.