Question

您好我正在尝试将一些拖放功能实现到项目中，但在某些方面遇到了一些困难。我遇到的一个问题是创建一个自定义头像，我能够实现自定义头像，但必须稍微作弊并用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源，然后给它一个自定义创建者，我试图建立我自己的自定义头像。 actyual draggable标记如下：

<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（或{{1}的自己的容器中这一事实。 }}）。请查看dojo/dnd/Avatar.js上的来源。

如果您仍想使用自定义创建者，则可以选择以下几种方法：

为您的商品添加dojoDndAvatarItem属性。在这种情况下，这是作为dndData参数传递给创建者函数的内容。它可以是任何东西，您可以使用它来进一步自定义头像。例如。您可以序列化JSON对象并从该对象动态创建头像，或者您可以将其设置为唯一ID，然后使用item访问其下方的节点。
使用dojo.query()方法以编程方式删除项目。在这种情况下，您的创建者功能必须同时实现头像的情况和实际项目的情况。

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

一旦您了解了正在发生的事情，Dojo reference guide也会有所帮助。当然，使用源Luke！

帮助Dojo Drag＆amp;下降

1 个答案: