Ayuda con Dojo Drag & Drop

Question

Hola, estoy tratando de implementar una funcionalidad de arrastrar y soltar en un proyecto, pero tengo un poco de dificultad con algunos aspectos. Uno de los problemas que tengo es con la creación de un avatar personalizado, puedo lograr un avatar personalizado pero tengo que hacer trampa ligeramente y ocultar algunos elementos con CSS.

A continuación se muestra un retazo De mi código, no todo el código, he requerido todos los Pacakges necesarios, 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, como puedes ver, creo mi fuente DND y luego le doy un creador personalizado donde intento construir mi propio avatar personalizado. El marcado de arrastre actyual está a continuación:

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

En lugar de agregar todo el DIV de Candrag y Down, me gustaría tomar diferentes elementos, como la imagen y el título del producto y solo mostrarlos. Si alguien tiene alguna idea, le agradezco de antemano también si mi pregunta no ha sido lo suficientemente clara, puedo intentar reformular.

Salud

Answer 1

CSS debe estar bien. De lo contrario, puede usar el dndData Atribuya para sus elementos o agregue los elementos manualmente a su objeto fuente DND.

Cuando usas dojoDndItem Clase, Dojo espera que la visualización del avatar ya se resuelva en el marcado en sí. Es por eso que pasa el HTML interno como datos del elemento. Esto es para el caso más simple y común, cuando no usaría un creador personalizado. Creo que usar CSS para personalizar el avatar está bien. Incluso si no usa un creador personalizado para establecer el avatarStyle clase, puede aprovechar el hecho de que Dojo pone el avatar dentro de su propio contenedor marcado con la clase dojoDndAvatar (o dojoDndAvatarItem). Echa un vistazo a la fuente en dojo/dnd/avatar.js.

Si aún desea usar un creador personalizado, tiene un par de opciones:

• Agrega un dndData atribuye a sus artículos. En ese caso, eso es lo que se pasa a la función del creador como el item parámetro. Puede ser cualquier cosa, y puede usarlo para personalizar aún más el avatar. P.ej. Puede serializar un objeto JSON y crear dinámicamente el avatar desde ese objeto, o puede establecerlo en una identificación única y luego usar dojo.query() Para acceder a los nodos debajo de él.

• Eliminar los elementos por completo agrégalos programáticamente con el insertNodes() método. En ese caso, la función de su creador debe implementar tanto el caso para el avatar como el caso para el elemento real.

No aborda su pregunta en particular, pero aquí hay un excelente Tutorial de dojo dnd.

los Guía de referencia del dojo También es útil, una vez que comprende lo que está sucediendo. Y, por supuesto, ¡usa la fuente Luke!