0

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

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

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

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

4

2 回答 2

0

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

可能值得查看 jqueryui 的拖放功能（如果您还没有这样做）并探索snapModeandsnapTolerance选项（请参阅文档）。

更新：

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

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

于 2012-11-29T13:44:20.443 回答
0

一个简单的选择是使用图像地图元素为您的 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/

于 2012-11-30T01:23:38.657 回答