Question

我正在使用Dojo.dnd在区域之间传输项目。问题是：一旦我放下它们，物品就会卡入到位，但是我希望它们留在我丢弃的地方，但仅限于一个区域。

这里有一些代码可以更好地解释这一点：

  <div id="dropZone" class="dropZone">
    <div id="itemNodes"></div>
    <div id="targetZone" dojoType="dojo.dnd.Source"></div>
  </div>

“dropZone”是一个包含两个dojo.dnd.Source区域，“itemNodes”（以编程方式创建）和“targetZone”的DIV。应将项目（带有图像的DIV）从“itemNodes”中的简单列表拖到“targetZone”中，并保留在删除的位置。一旦它们被拖出“targetZone”，它们应该快速回到“itemNodes”中的列表。

以下是我用来创建项目的代码：

  var nodelist = new dojo.dnd.Source("itemNodes");
  {Smarty-Loop}
    nodelist.insertNodes(false, ['<img class="dragItem" src="{$items->info.itemtext}" alt="{$items->info.itemtext}" border="0" />']);
  {/Smarty-Loop}

但是这样我只有两个项目列表，放入“targetZone”的项目将不会停留在我删除的位置。我尝试了循环dojo.query(".dojoDndItem").forEach(function(node)来抓取所有项目并将其更改为“可移动”类型：

使用dojo.dnd.move.constrainedMoveable会更改项目，以便始终移动（即使在“itemNodes”中）
使用dojo.dnd.move.boxConstrainedMoveable并将“box”定义为“targetZone”的边框，可以在“targetZone”内部移动项目，但是只要我放下它们，我就无法抓住它将它们移回去。（奇怪：dojo.connect(node, "onMoved"在这里不起作用，即使不管是什么也不会发射。）

所以这里有一个问题：是否有可能创建两个dnd.Sources，我可以来回移动项目，让项目只在其中一个源中“可移动”？是否有一个变通方法使项目可移动，如果它们没有被放入“targetZone”，它们将自动移回“itemNodes”中的列表？

提交页面后，我必须保存已放入“targetZone”的每个项目的位置。（下一步是在页面加载时将项目定位在“targetZone”内部，如果之前已经填充了网格，但是我很乐意让这个东西在第一时间运行。）

任何提示都表示赞赏。

问候，选择0r

Answer 1

此类功能没有直接支持。可以使用自定义代码完成此操作，例如，通过继承Source并覆盖其insertNodes()。

Answer 2

这是一个快速的解决方法，让这个工作：

我最终只使用了一个dojo.dnd.Source的DIV，并且包含了应该放入“dropZone”并在其中移动的项目，同时在放置在dropZone外部时回溯到项目列表。

所有项目均为dojo.dnd.move.parentConstrainedMoveable，以使其在原始DIV中移动。连接到onMoveStop将使我有机会决定dropZone或其他地方是否发生了“丢弃”。

  if (coordX >= (dropCoords.l + dropAreaX)  &&
      coordX <= (dropCoords.l + dropAreaX + dropAreaW) &&
      coordY >= (dropCoords.t + dropAreaY) &&
      coordY <= (dropCoords.t + dropAreaY + dropAreaH))
  {
     // OK!
  }
  else
  {
    // outside, snap back to list
  }

dropAreaX和dropAreaY包含dropZone开始的坐标，dropAreaW和dropAreaH包含其宽度和高度。

如果“OK！”，项目将保存到一个数组中，因此我知道哪些项目已被删除。否则该项目将从该数组中删除（如果它在那里），该项目将被放回到列表中（通过CSS“left：0”）。数组中的元素数量将告诉我列表中剩余多少个元素，因此我可以使用“top：numberOfElement * heightOfElement px”在循环中“堆叠”它们。

还有更多内容，因为我需要将项目坐标写入隐藏字段，但我想这应该可以让任何人在正确的轨道上处理类似的问题。

使用Dojo拖放与Dojo Moveable一起使用

2 个答案: