html拖放不规则形状答案

【问题标题】：html drag and drop irregular shapeshtml拖放不规则形状
【发布时间】：2012-11-17 13:55:22
【问题描述】：

是否可以有可拖动元素和 droptarget 元素，它们是图像并且其边框是不规则形状？

例如，如果我想要一个星形，当你将鼠标悬停在它上面时会触发一个 jQuery 事件，并且你可以将它拖到另一个星形中，这可能吗？

如果我将其绘制为透明 png 并使用 IMG 标签或带有背景图像的 div，那么显然我将拖动一个方形元素。我认为答案可能在于图像映射或 SVG？

我宁愿将它们放在 HTML Canvas 中，因为我希望元素本身仍然是 HTML 元素。

【问题讨论】：

标签： jquery html drag-and-drop png

【解决方案1】：

一个简单的选择是使用图像地图元素为您的 png 提供可定位区域。

例如

<img class="shape" usemap="#shapeMap" border="0">
<map name="shapeMap">
    <area class="a" shape="polygon" coords="19,44,45,11,87,37,82,76,49,98">
    <area class="b" shape="rect" coords="140,132,241,179">
    <area class="c" shape="circle" coords="100,100,35">
</map>

完整示例：http://jsfiddle.net/66YsR/

【讨论】：

嗨，彼得，我认为您的回答最接近我的需要，因为用户只能点击他们应该点击的区域。但是，我不确定我能想出一种方法来让 IMG 在被拖动的区域时可以拖动。
我不会拖动该区域。将事物连接起来，以便该区域上的鼠标按下开始拖动底层图像。
彼得，您能否详细说明您将如何做到这一点？

【解决方案2】：

我的猜测是，在您的情况下，将透明 png 作为背景图像方法就足够了。对于大多数拖放交互，可拖动项目和目标之间的任何数量的交集都应该足以触发拖放。期望用户进行精确匹配很可能会导致糟糕的用户体验。

可能值得查看 jqueryui 的拖放功能（如果您还没有这样做的话）并探索snapMode 和snapTolerance 选项（请参阅documentation）。

更新：

SVG 可能是最好的解决方案。您可以查看其中一个 SVG 库来处理绘制形状的繁重工作。 Raphael 还内置了对拖放的支持（参见示例 here）。

只是一个想法，但问题的更低保真解决方案可能只是在用户开始拖动交互时将拖动的元素置于光标下的中心（jqueryui.draggable 的 cursorAt 选项将允许您这样做这）。如果用户在非活动区域上单击，该元素将捕捉到光标下方的中心（请参阅fiddle）。即使对于相对较大的形状，这看起来也可以接受（至少在我看来）。

【讨论】：

感谢您的回答，但我确实需要它准确，因为项目可能重叠。例如，想想谷歌地图上的标记，您不会希望通过单击它们周围的透明区域来单击它们。
那么您是说用户必须将目标位置与可放置项匹配到像素？
不，但是如果您在 300 像素 x 300 像素的框内有一个圆圈，并且用户单击框的一角，他们将单击距离实际圆圈超过 50 像素的位置。如果可以在不实际点击的情况下拖动圆圈，这似乎是完全错误的。
好的，我明白你现在在说什么（抱歉，我花了这么长时间才到达那里）。我已经更新了我的答案。