Hilfe bei Dojo Drag & Drop

Question

Hallo, ich versuche, einige Drag & Drop -Funktionen in ein Projekt zu implementieren, habe aber ein wenig Schwierigkeiten mit einigen Aspekten. Eines der Probleme, die ich habe, ist die Erstellung eines benutzerdefinierten Avatars. Ich kann einen benutzerdefinierten Avatar erreichen, muss aber leicht betrügen und einige Elemente mit CSS verbergen.

Unten ist a Snippet Von meinem Code, nicht der gesamte Code, habe ich alle notwendigen Pacakges usw. verlangt usw.

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, wie Sie sehen können, erstelle ich meine DND -Quelle und gebe ihm einen benutzerdefinierten Schöpfer, in dem ich versuche, meinen eigenen benutzerdefinierten Avatar zu erstellen. Das actyual draggierbare Markup ist unten:

<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>

Anstatt das gesamte Div von Candrag und Down anzugreifen, möchte ich verschiedene Elemente wie das Bild und den .Produkttitel holen und diese einfach anzeigen. Wenn jemand Ideen hat, danke ich Ihnen im Voraus auch, wenn meine Frage nicht klar genug war, dass ich versuchen kann, neu zu sein.

Prost

Answer 1

CSS sollte in Ordnung sein. Andernfalls können Sie entweder die verwenden dndData Attribut für Ihre Elemente oder fügen Sie die Elemente manuell zu Ihrem DND -Quellobjekt hinzu.

Beim Benutzen dojoDndItem Klasse, Dojo erwartet, dass die Visualisierung des Avatars bereits im Markup selbst aufgelöst wird. Aus diesem Grund passt es das innere HTML als Elementdaten über. Dies ist für den einfachsten und gemeinsamsten Fall, wenn Sie keinen benutzerdefinierten Schöpfer verwenden würden. Ich denke, es ist in Ordnung, CSS zum Anpassen des Avatars zu verwenden. Auch wenn Sie keinen benutzerdefinierten Schöpfer verwenden, um das festzulegen avatarStyle Klasse können Sie die Tatsache nutzen, dass Dojo den Avatar in seinen eigenen Behälter mit der Klasse markiert dojoDndAvatar (oder dojoDndAvatarItem). Schauen Sie sich die Quelle bei dojo/dnd/avatar.js.

Wenn Sie weiterhin einen benutzerdefinierten Schöpfer verwenden möchten, haben Sie einige Optionen:

• Füge hinzu ein dndData zu Ihren Elementen zuschreiben. In diesem Fall wird das an die Schöpferfunktion als die übergeben wie die item Parameter. Es kann alles sein, und Sie können das verwenden, um den Avatar weiter anzupassen. Z.B. Sie können ein JSON -Objekt serialisieren und den Avatar dynamisch aus diesem Objekt erstellen oder auf eine eindeutige ID einstellen und dann verwenden dojo.query() Sozug auf die darunter liegenden Knoten.

• Entfernen Sie die Elemente vollständig programmgesteuert mit dem insertNodes() Methode. In diesem Fall muss Ihre Erstellungsfunktion sowohl den Fall für den Avatar als auch den Fall für das tatsächliche Element implementieren.

Es geht nicht besonders an Ihre Frage, aber hier ist ein ausgezeichnetes Dojo -DND -Tutorial.

Das Dojo -Referenzhandbuch ist auch hilfreich, sobald Sie verstehen, was passiert. Und natürlich verwenden Sie die Quelle Luke!