Question

我迫切需要使用dojo编写一个用于拖放的javascript代码。请提供包含相同代码的链接。我只想要简单的功能，即1个容器中的项目可以被删除到另一个容器的项目。没什么装饰的。我已经把它搞砸了但是做不到。

Answer 1

这是一个例子：如果你想在li里面拖放li，你可以这样做： HTML：

<ul id="list">
  <li class="dojoDndItem">content</li>
  <li class="dojoDndItem">content</li>
  <li class="dojoDndItem">content</li>
</ul>

JavaScript的：

dojo.require("dojo.dnd.Source");

dojo.addOnLoad(function(){
  new dojo.dnd.Source("list");
});

就是这样。完成。这是一个jsfiddle示例：http://jsfiddle.net/xFcuB/

你可以添加各种各样的糖。这里有更多信息：http://dojotoolkit.org/reference-guide/dojo/dnd.html#dojo-dnd

Answer 2

这是一个例子：如果你想从一个容器拖放到另一个容器：

<强> HTML

<div dojoType="dojo.dnd.Source" id="listNode" class="container1">
   <div dojoType="dojo.dnd.Source" class="dojoDndItem movableContainer">A container</div>
   <div class="dojoDndItem">Item 1</div>
   <div class="dojoDndItem">Item 2</div>
   <div class="dojoDndItem">Item 3</div>
</div>
<br>
<div dojoType="dojo.dnd.Source" class="container1">
</div>

<强>的JavaScript

dojo.require("dojo.dnd.Source");

<强> CSS

.dojoDndItem { padding:3px; }
.movableContainer { border: 1px solid #aaa; }
.movableContainer div { margin-left: 5em; }
.container1 { border-radius: 8pt 8pt 8pt 8pt; border:1px solid #aaa; padding: 1em 3em; cursor: pointer; }
.container2 {position:inherit;border-radius: 8pt 8pt 8pt 8pt; border:1px solid #aaa; padding: 1em 3em;cursor: pointer; }
#listNode { background: #ddd; }

你已经完成了。这就是魔术。这是一个小例子：http://jsfiddle.net/V5yBs/

我希望这就是你想要的。享受

Answer 3

查看http://www.sitepen.com/blog/2011/12/05/dojo-drag-n-drop-redux/

道场拖放

3 个答案: