Question

是否可以使用可拖动元素和droptarget元素作为图像，其边框是不规则形状？

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

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

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

Answer 1

我的猜测是透明的png作为背景图像方法就足够了。对于大多数拖放交互，可拖动项目与目标之间的任何交叉量应足以触发掉落。期望用户精确配合将极有可能造成糟糕的用户体验。

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

<强>更新

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

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

Answer 2

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

e.g。

<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/

html拖放不规则形状

2 个答案: