Помогите с Dojo Drag & Drop

Question

Привет, я пытаюсь внедрить некоторые функциональные возможности перетаскивания в проект, но у меня есть немного трудности с несколькими аспектами. Одна из проблем, с которыми я сталкиваюсь, заключается в создании пользовательского аватара, я могу достичь пользовательского аватара, но должен слегка обманывать и скрыть некоторые элементы с CSS.

Ниже фрагмент моего кода, а не весь код, мне потребовались все необходимые пака, и т. Д.

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

Итак, как вы можете видеть, я создаю свой источник DND, затем даю ему создатель пользователя, где я пытаюсь создать свой собственный аватар. Актуальная перетаскиваемая разметка ниже:

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

Вместо того, чтобы добавлять весь DIV из Candrag и вниз, я хотел бы взять различные элементы, такие как изображение и заголовок. Продукт, и просто отобразить их. Если у кого -то есть какие -либо идеи, я заранее благодарен вам, если мой вопрос не был достаточно ясен, я могу попытаться перефразировать.

Ваше здоровье

Answer 1

CSS должен быть в порядке. В противном случае вы можете либо использовать dndData Атрибут для ваших элементов или добавьте элементы вручную в свой объект DND Source.

Когда используешь dojoDndItem Класс, додзё, ожидает, что визуализация аватара уже будет решена в самой наценке. Вот почему он передает внутренний HTML в качестве данных элемента. Это для самого простого и общего случая, когда вы не будете использовать пользовательского создателя. Я думаю, что использование CSS для настройки аватара в порядке. Даже если вы не используете пользовательского создателя, чтобы установить avatarStyle Класс, вы можете воспользоваться тем фактом, что Dojo помещает аватар в свой собственный контейнер, отмеченный классом dojoDndAvatar (или же dojoDndAvatarItem) Взгляните на источник в dojo/dnd/avatar.js.

Если вы все еще хотите использовать пользовательского создателя, у вас есть пара вариантов:

• Добавить dndData атрибут к вашим предметам. В этом случае это то, что передается функции создателя как item параметр. Это может быть что угодно, и вы можете использовать это для дальнейшей настройки аватара. Например. Вы можете сериализовать объект JSON и динамически создать аватар из этого объекта, или вы можете установить его на уникальный идентификатор, а затем использовать dojo.query() Чтобы получить доступ к узлам под ним.

• Удалите элементы полностью добавить их программно с помощью insertNodes() метод В этом случае ваша функция Creator должна реализовать как случай для аватара, так и случая для фактического элемента.

В частности, не решает ваш вопрос, но вот отличный DOJO DND Учебник.

А Справочное руководство Dojo Также полезно, как только вы поймете, что происходит. И, конечно же, используйте источник Люка!