Aiuto con Dojo Drag & Drop

Question

Ciao, sto cercando di implementare alcune funzionalità di trascinamento in un progetto, ma ho un po 'di difficoltà con alcuni aspetti. Uno dei problemi che sto riscontrando è con la creazione di un avatar personalizzato, sono in grado di ottenere un avatar personalizzato ma devo imbrogliare leggermente e nascondere alcuni elementi con CSS.

Di seguito è riportato a frammento Del mio codice non l'intero codice, ho richiesto tutti i pacakges necessari ecc.

dojo.query(".canDrag").forEach(function(node, index, nodelist){
        var createSource = new dojo.dnd.Source(
            node, {copyOnly: true, creator: createAvatar}
        );

    function createAvatar(item, hint) {
       var node       = dojo.doc.createElement("span");
       dojo.addClass(node, "avatarStyle");

        if ( hint == "avatar" ) {
            var dHtml = item; 
            console.log("trying " + dHtml);
            node.innerHTML = item;
        } 
        else {

            console.log("if this show remove redudant call");
        }

       return {node: node, data: item, type: "product", copyOnly: true};
    };

Ok così come puoi vedere, creo la mia fonte DND, quindi dargli un creatore personalizzato in cui cerco di costruire il mio avatar personalizzato. Il markup draggable actyual è sotto:

<div class="canDrag panelLeft">
                        <div class="dojoDndItem" dndType="product" title="digitalCamera" id="12345">
                            <h3 class="productTitle"><a href="">Samsung ES71</a></h3>
                            <p class="productType">Compact Digital Camera</p>
                            <img src="img/small_Cam.png" class="imgLMargin" alt="Samsung ES71"/>
                            <div class="dragHandle">
                            </div>
                        </div>
                    </div>

Invece di aggiungere l'intero div da Candrag e giù, vorrei prendere diversi elementi come l'immagine e il titolo di produzione e mostrarli. Se qualcuno ha qualche idea, ti ringrazio anche in anticipo se la mia domanda non è stata abbastanza chiara, posso provare a riformulare.

Saluti

Answer 1

CSS dovrebbe andare bene. Altrimenti, puoi usare il dndData Attributo per i tuoi elementi o aggiungi gli elementi manualmente all'oggetto sorgente DND.

Quando si usa dojoDndItem Classe, Dojo si aspetta che la visualizzazione dell'avatar sia già risolta nel markup stesso. Ecco perché passa l'HTML interiore come dati dell'articolo. Questo è per il caso più semplice e comune, quando non useresti un creatore personalizzato. Penso che usare CSS per personalizzare l'avatar vada bene. Anche se non usi un creatore personalizzato per impostare il avatarStyle classe, puoi sfruttare il fatto che Dojo mette l'avatar all'interno del proprio contenitore contrassegnato dalla classe dojoDndAvatar (o dojoDndAvatarItem). Dai un'occhiata alla fonte a dojo/dnd/avatar.js.

Se vuoi ancora utilizzare un creatore personalizzato, hai un paio di opzioni:

• Aggiungere un dndData attributo ai tuoi articoli. In tal caso, questo è ciò che viene passato alla funzione Creatore come il item parametro. Può essere qualsiasi cosa e puoi usarlo per personalizzare ulteriormente l'avatar. Per esempio. Potresti serializzare un oggetto JSON e creare dinamicamente l'avatar da quell'oggetto, oppure potresti impostarlo su un ID univoco e quindi utilizzare dojo.query() Per accedere ai nodi sotto di esso.

• Rimuovere gli elementi aggiungali interamente a livello di programmazione con il insertNodes() metodo. In tal caso, la funzione creatore deve implementare sia il caso dell'avatar sia il caso per l'elemento reale.

Non affronta la tua domanda in particolare, ma ecco un eccellente DOJO DND Tutorial.

Il DOJO Guida di riferimento è anche utile, una volta che hai capito cosa sta succedendo. E, naturalmente, usa la fonte Luke!