Aide avec Dojo Drag & Drop

Question

Salut, je suis en train de mettre en œuvre une fonctionnalité glisser et de déposer dans un projet, mais ai un peu de difficulté avec quelques aspects. L'un des problèmes que j'ai est avec la création d'un avatar personnalisé, je suis en mesure de réaliser un avatar personnalisé, mais ont de tricher un peu et se cacher certains éléments avec CSS.

Voici une extrait de mon code et non le code entier, j'ai demandé à tous les pacakges nécessaires, etc.

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, donc comme vous pouvez le voir, je crée ma source NpD puis donnez-lui un créateur personnalisé où je tente de construire mon propre coutume Avatar. Le balisage est actyual draggable ci-dessous:

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

Plutôt que append l'ensemble div de canDrag et vers le bas, je voudrais saisir différents éléments tels que l'image et le titre .Product et juste afficher ceux-ci. Si quelqu'un a des idées que je vous remercie d'avance même si ma question n'a pas été assez clair, je peux essayer de reformuler.

Vive

Answer 1

CSS devrait être bien. Dans le cas contraire, vous pouvez utiliser l'attribut dndData pour vos articles, ou ajouter des éléments manuellement à votre objet source DnD.

Lorsque vous utilisez la classe dojoDndItem, Dojo attend la visualisation de l'avatar à déjà résolu dans le balisage lui-même. Voilà pourquoi il passe le HTML interne que les données de l'élément. Ceci est le plus simple et le cas commun, lorsque vous utilisez pas un créateur personnalisé. Je pense que l'utilisation de CSS pour personnaliser l'avatar est très bien. Même si vous n'utilisez pas un créateur personnalisé pour définir la classe avatarStyle, vous pouvez profiter du fait que Dojo met l'avatar dans son propre conteneur marqué par la dojoDndAvatar de classe (ou dojoDndAvatarItem). Jetez un oeil à la source dojo / DND / Avatar.js .

Si vous voulez continuer à utiliser un créateur personnalisé, vous avez deux options:

• Ajouter un attribut dndData à vos articles. Dans ce cas, c'est ce qui est transmis à la fonction de créateur comme paramètre item. Il peut être quelque chose, et vous pouvez l'utiliser pour personnaliser l'avatar. Par exemple. vous pouvez sérialiser un objet JSON et créer de façon dynamique l'avatar de cet objet, ou vous pouvez le mettre à un identifiant unique et ensuite utiliser dojo.query() pour accéder aux nœuds dessous.

• Supprimer les éléments les ajouter entièrement par programmation avec la méthode insertNodes(). Dans ce cas, votre fonction créateur doit mettre en œuvre aussi bien le cas pour l'avatar et le cas pour l'élément réel.

Il ne répond pas à votre question en particulier, mais est ici un excellent tutoriel Dojo DnD.

Le Dojo guide de référence est également utile, une fois que vous comprenez ce qui se passe. Et bien sûr, utilisez la source Luke!