0

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

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

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

“dropZone”是一个包含两个区域的 DIV dojo.dnd.Source，“itemNodes”（以编程方式创建）和“targetZone”。项目（带有图像的 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)来抓取所有项目并将它们更改为“可移动”类型：

  • usingdojo.dnd.move.constrainedMoveable将更改项目，以便它们始终可以移动（即使在“itemNodes”中）
  • 使用dojo.dnd.move.boxConstrainedMoveable“box”并将其定义到“targetZone”的边界，可以在“targetZone”内移动项目，但是一旦我放下它们，我就无法抓住它们并将它们移回。（奇怪：dojo.connect(node, "onMoved"在这里不起作用，无论如何都不会触发。）

那么问题来了：是否可以创建两个 dnd.Sources 来来回移动项目并让项目仅在其中一个源中“可移动”？
或者是否有一种解决方法，比如使项目可移动，如果它们没有被放入“targetZone”，它们会自动移回“itemNodes”中的列表？

提交页面后，我必须保存已放入“targetZone”的每个项目的位置。（如果之前已经填充了网格，下一步将在页面加载时将项目定位在“targetZone”内，但我很乐意让事情首先工作。）

任何提示表示赞赏。

问候， Select0r

4

2 回答 2

0

没有对此类功能的直接支持。它可以通过自定义代码来完成，例如，通过子类化 aSource并覆盖它的insertNodes().

于 2010-03-31T22:36:01.440 回答
0

这里有一个快速的解决方法来让它工作：

我最终只使用了一个 DIV，它是一个dojo.dnd.Source包含应该放入“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”将它们“堆叠”在一个循环中。

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

于 2010-04-07T16:00:24.643 回答