1

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

下面是我的代码片段而不是整个代码，我需要所有必要的 pacakges 等。

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 标题，然后只显示它们。如果有人有任何想法，我提前感谢你，如果我的问题不够清楚，我可以尝试改写。

干杯

4

1 回答 1

2

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

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

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

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

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

它没有特别解决您的问题，但这里有一个出色的Dojo DnD 教程。

Dojo 参考指南也很有帮助，一旦您了解正在发生的事情。当然，使用源卢克！

于 2011-06-14T14:51:26.910 回答