Dojo 拖放帮助

Question

您好，我正在尝试在项目中实现一些拖放功能，但在某些方面遇到了一些困难。我遇到的问题之一是创建自定义头像，我能够实现自定义头像，但必须稍微作弊并使用 CSS 隐藏一些元素。

下面是我的代码的 sn-p 不是整个代码，我需要所有必要的包等。

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 源，然后给它一个自定义创建者，我尝试在其中构建我自己的自定义 Avatar。实际可拖动标记如下：

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

我不想从 canDrag 和 down 中追加整个 div，我想抓取不同的元素，例如图像和 .product 标题，然后只显示它们。如果有人有任何想法，我提前感谢你，如果我的问题不够清楚，我可以尝试改写。

干杯

Answer 1

CSS 应该没问题。否则，您可以为您的项目使用 dndData 属性，或手动将项目添加到您的 DnD 源对象。

当使用dojoDndItem 类时，Dojo 期望头像的可视化已经在标记本身中得到解决。这就是为什么它将内部 HTML 作为项目数据传递的原因。这是最简单和最常见的情况，即您不会使用自定义创建者。我认为使用 CSS 自定义头像很好。即使您不使用自定义创建者来设置avatarStyle 类，您也可以利用Dojo 将化身放置在其自己的标有dojoDndAvatar（或dojoDndAvatarItem）类的容器中这一事实。查看dojo/dnd/Avatar.js的源代码。

如果您仍想使用自定义创建器，您有几个选择：

• 为您的项目添加dndData 属性。在这种情况下，这就是作为 item 参数传递给创建者函数的内容。它可以是任何东西，您可以使用它来进一步自定义头像。例如。您可以序列化一个 JSON 对象并从该对象动态创建头像，或者您可以将其设置为唯一 id，然后使用 dojo.query() 访问它下面的节点。

• 完全删除项目并使用insertNodes() 方法以编程方式添加它们。在这种情况下，您的创建者函数必须同时实现头像的案例和实际项目的案例。

它并没有特别解决您的问题，但这里有一个很好的Dojo DnD tutorial。

一旦您了解发生了什么，Dojo reference guide 也很有帮助。当然，使用源卢克！