使用Dojo拖放与Dojo移动一起掉落

StackOverflow https://stackoverflow.com/questions/2551742

  •  23-09-2019
  •  | 
  •  

题

我正在使用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-areas，“ itemnodes”（通过编程性创建）和“ targetzone”。项目（带有图像的dif）应从“ 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) 抓住所有项目并将其更改为“可移动” -Type：

  • 使用 dojo.dnd.move.constrainedMoveable 会更改项目，以便他们可以 总是 四处移动（即使在“ itemnodes”中）
  • 使用 dojo.dnd.move.boxConstrainedMoveable 并将“盒子”定义到“ targetzone”的边界使得只能将物品移动到“ targetzone”内部，但是一旦我丢下它们，我就无法抓住并将它们移回去。 （奇怪的： dojo.connect(node, "onMoved" 在这里不起作用，甚至不会开火，无论如何。）

因此，这是一个问题：是否可以创建两个DN.源，我可以来回移动项目，并让项目仅在其中一个来源中“可移动”？
还是有解决方法之类的方法，例如使项目可移动，如果它们没有掉入“靶区”中，它们会自动将其移回“ itemNodes”列表中？

提交页面后，我必须保存所有已放入“ targetzone”的项目的位置。 （如果网格以前已经填充，下一步将在页面加载中将项目放置在“ targetzone”内部，但是我很乐意首先让事情工作。）

任何提示都将受到赞赏。

问候，select0r

有帮助吗？

解决方案

没有直接支持此类功能。可以使用自定义代码（例如）来完成 Source 并覆盖它 insertNodes().

其他提示

这是一个快速解决此问题的快速解决方法：

我最终只使用了一个Div dojo.dnd.Source 并包含应掉入“滴定区”中的项目，并在放置在滴区外面时将其移动到项目列表中。

所有项目都是 dojo.dnd.move.parentConstrainedMoveable 使它们在原始div中移动。连接到 onMoveStop 将使我有机会决定“滴”是否发生在滴区或其他地方。

  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 包含其宽度和高度。

如果“好！”，这些项目将被保存到数组中，所以我知道哪些项目已被删除。否则，该项目将从该数组（如果在那里）中删除，并将项目放回列表中（通过CSS“左：0”）。数组中的元素数将告诉我列表中剩下多少个元素，因此我可以使用“ Top：numberOflement * heighterofelement PX”将它们“堆叠”到循环中。

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top