0

画像で境界線が不規則な形状のドラッグ可能な要素とドロップターゲット要素を持つことは可能ですか?

たとえば、マウスを上に置くと jQuery イベントが発生し、別の星形にドラッグできる星形が必要な場合、これは可能ですか?

これを透明な png として描画し、IMG タグまたは背景画像付きの div を使用すると、明らかに正方形の要素をドラッグすることになります。答えはイメージ マップまたは SVG にあるのではないかと考えています。

要素をそれ自体で HTML 要素のままにしたいので、HTML Canvas 内に配置したいと思います。

4

2 に答える 2

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 に答える
0

私の推測では、背景画像のアプローチとしての透明なpngで十分だと思います。ほとんどのドラッグアンドドロップインタラクションでは、ドラッグ可能なアイテムとターゲットの間の交差の量は、ドロップをトリガーするのに十分である必要があります。ユーザーが正確にフィットすることを期待すると、ユーザーエクスペリエンスが低下する可能性があります。

ドラッグアンドドロップ機能についてはjqueryuiを調べ（まだ行っていない場合）、snapModeおよびsnapToleranceオプションを調べる価値があるかもしれません（ドキュメントを参照）。

アップデート：

SVGはおそらく最良の解決策です。SVGライブラリの1つを見て、図形を描くという手間のかかる作業を処理することができます。Raphaelには、ドラッグアンドドロップのサポートも組み込まれています（ここの例を参照）。

考えただけですが、この問題に対するよりローファイな解決策は、ユーザーがドラッグ操作を開始したときに、ドラッグされた要素をカーソルの下の中央に配置することです（のcursorAtオプションをjqueryui.draggable使用すると、これを実行できます）。ユーザーが非アクティブな領域をクリックすると、要素がスナップしてカーソルの下の中央に配置されます（フィドルを参照）。比較的大きな形状の場合でも、これは（少なくとも私の目には）まずまずのように見えます。

于 2012-11-29T13:44:20.443 に答える