道场 dnd : Avatar positioning

标签 dojo drag-and-drop avatar

是否可以使用dojo工具包的dnd api更改头像的位置?此时,拖动时,被拖动项目的头像出现在鼠标光标的右侧和下方。我希望它与鼠标光标位于同一位置。我对我的应用程序进行了一些可用性测试,大多数人似乎尝试尝试将头像拖到放置区域中,而不是将光标移动到放置区域上。任何输入都会很好。谢谢!

最佳答案

抱歉,由于技术原因无法实现。

更新:根据大众的要求,这些是技术原因:

  • 当鼠标正下方有一个节点时,该节点会获取所有鼠标事件。
  • 鼠标事件在父链上冒泡。
  • 现在想象一下,您用鼠标移动该节点 - 该节点将始终获得所有鼠标事件。
  • 这意味着任何其他节点(例如目标)无法获取鼠标事件,除非它是移动节点的父节点。通常情况并非如此。

但我知道其他人也能做到!应该是可以的!是的,这是可能的……原则上:

  • 让我们注册所有目标节点。
  • 让我们直接在最顶层的父级(文档)上捕获相关的鼠标移动事件。
  • 当我们检测到拖动操作时,我们执行以下操作:
    1. 计算所有目标的几何形状(边界框)。
    2. 每次鼠标移动时,我们都会检查当前鼠标位置是否与目标重叠。 “A+”学生的奖励分:检测与其他节点的重叠,例如,当目标因美观原因而部分模糊时,并正确处理这种情况。
    3. 如果当前鼠标位置与目标重叠,让我们启动“可以放下”操作,例如,显示一些提示,以便最终用户知道她现在可以放下。

为什么 Dojo 不这样做?由于一些技术原因(我们终于实现了!):

  • 节点的几何计算在大多数浏览器中都是出了名的错误。一旦涉及表格或任何其他重要的放置方式,您就无法 100% 确定边界框是正确的。
  • 几何计算是一项昂贵的操作,假设在拖动操作期间不能进行任何更改(情况并非总是如此),我们必须对所有目标的每次拖动操作至少执行一次。浏览器可能会出于多种原因回流节点⇒它可以移动/调整现有目标的大小,因此我们必须保持警惕。
  • 通常,计算出的框保存在一个列表中 ⇒ 检查列表中的交集是 O(n) (线性) ⇒ 随着目标数量的增长而无法很好地扩展。
  • 所有鼠标事件处理程序都应该很快,否则浏览器的鼠标事件处理工具可能会“损坏”,从而导致不可预测的副作用。请参阅前面的几点,了解鼠标事件处理速度缓慢的原因。
  • 改进线性搜索是可能的,例如,可以使用 2D 空间树,但它会导致更多(更多)JavaScript 代码 ⇒ 在客户端下载更多内容 ⇒ 通常这是不值得的。

我怎么知道呢?因为 Dojo 在早期版本中曾经有过这种拖放操作,所以我们遇到了我上面描述的令人厌烦的问题。任何改进都是一场艰苦的战斗,这会增加代码大小。最后,我们决定不重新发明和复制浏览器中已经内置的机制。浏览器实际上执行相同的工作:计算节点的几何形状,查找底层节点,并适本地调度鼠标移动事件。

当前实现不使用鼠标移动事件,也不计算几何图形。相反,它依赖于开始拖动后目标检测到的鼠标悬停/移出事件。它工作可靠并且可扩展性良好。

这个故事中的另一个问题是:Dojo 将目标视为容器 - 一个非常常见的用例(购物车、重新排列项目、编辑层次结构)。目前已实现线性容器和通用树,也可以自定义容器。拖放时,您可以看到拖动的项目并将其放置在目标容器内的适当位置,例如,将它们插入现有项目之间。使用几何计算和检查来实现此功能将非常昂贵。

关于道场 dnd : Avatar positioning,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1224128/

相关文章:

php - 在 Dojo 按钮上单击执行 PHP 脚本

javascript - javascript中的拖放功能

c++ - 实现 IDropTarget

image - 如何从他们的电子邮件地址获取用户图像

android - 如何在非gmail帐户的gmail应用程序上更改头像?

javascript - dojo.addonLoad() 似乎不适用于 IE

javascript - 使用 Dojo 1.9,在 IE 中所有解析失败

filter - 剑道多选搜索全文搜索

cocoa - NSOutlineView 具有拖放功能

javascript - 在 GroupAvatar 中,我的 "max"头像不遵守我的主题规则