子供向けのパズルを開発しています。
ズームとパンにjquery panzoomを使用しています https://github.com/timmywil/jquery.panzoom
$("#panzoom").panzoom(
{
$zoomIn: $("#zoomin").on("click"),
$zoomOut: $("#zoomout").on("click"),
maxScale: 1.2,
minScale: largestSide/backgroundSize,
increment: 0.05
});
// Set start zoom
$("#panzoom").panzoom("zoom",largestSide/backgroundSize);
.piece と .targetPuzzle に対してそれぞれ jquery ドラッグおよびドロップ可能
$(".targetPuzzle").droppable
({
accept: '.piece',
//tolerance: 'pointer',
tolerance: 'touch',
hoverClass: "highlight",
drop: function(event, ui)
{}
});
ここで私の問題をライブで見ることができます www.puzzstory.com/test-puzzle.html (#intro と #loading の表示を none にします):
- ピースを取り、ドロップ可能な div であるはずの白い領域に向かって進みます
- 白い領域が黄色に変わると、ドロップ可能な領域の上にすでにホバリングしていることを意味します。実際には領域 (div ではない) は panzoom によってサイズ変更されていないためです...??
これを解決する方法について何か考えはありますか?