Dojo 拖放：如何格式化放置的项目？答案

【问题标题】：Dojo Drag and drop: how to format a dropped item?Dojo 拖放：如何格式化放置的项目？
【发布时间】：2009-07-14 18:35:54
【问题描述】：

我正在使用 Dojo 尝试使用 dojo 的 dnd 构建应用程序。我已经四处寻找这个问题的答案，但我只是不确定如何完成这个。我有一个 Source 对象，其中有一堆以某种方式用 html/css 格式化的产品。当我将这些对象拖到我的目标对象时，拖放的项目看起来仍然和以前一样。我想在被删除后以不同的方式格式化它。任何想法如何做到这一点？

【问题讨论】：

标签： javascript dojo drag-and-drop

【解决方案1】：

您可以通过将 creator 函数引用传递给您的 Source 对象来做到这一点。

假设你有 dojo 1.3 并且可以使用dojo.create.

在你的 JS 中：

function myCreator( item, hint ) {
   var myDiv = dojo.create( 'div', { innerHTML: item.name });

   if (hint == 'avatar') {
      // create your avatar if you want
      myDiv.innerHTML = 'I'm an avator of ' + item.name;
   }
   return {node: myDiv, data: item, type: item.type};
}

然后在您的 HTML（div 或其他）中：

<div dojoType="dojo.dnd.Source" creator="myCreator"></div>

如果您想以编程方式创建 Source 项目，只需像这样传入创建者：

var dnd = new dojo.dnd.Source(someNode, { creator: myCreator });

我在上面的示例中使用了item.name。不过，这一切都取决于您的项目，因此您可能希望使用不同的字段。

创建dojo.dnd 页面的精彩演练在the SitePen blog 上。

【讨论】：

谢谢Seth——我在dnd Source 中使用了creator 函数，但没有意识到你也可以在Target 中使用它。谢谢！
啊……是的。道场就是这样偷偷摸摸的。 Target 是 Source 的子类。

【解决方案2】：

topic.subscribe("/dnd/drop", function(source, nodes, copy, target) {

    target.forInSelectedItems(function(item, id) {
        //alert(document.getElementById(id));
        if (document.getElementById(id).innerHTML == "something from your source") {
            //create what you want, and add it to id
        }
    }
}

【讨论】：