- ベストアンサー
JQueryを使用して、画像をドラッグで拡大・縮小できるボタンを配置する方法
- JQueryを使用して、画像をドラッグで拡大・縮小できるボタンを画像右下に配置する方法について質問があります。
- firefox(3.6.3)ではmouseupによるmousemoveのunbindがうまく機能せず、mousemoveが維持される問題があります。
- IE8やchrom、operaでは期待通りに動作しますが、時々chromでfirefoxと同様の不具合が発生します。修正方法を教えてください。
- s_h_i_b_a
- お礼率80% (36/45)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
確認はIE8とFirefox3.6.3でしかやってないです <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> div#frame1{ position : absolute; height : 360px; width : 240px; top : 0; left : 0; border : 5px solid #000FFF; } div#frame1 img#handle{ position : absolute; bottom : 0; right : 0; border : 5px solid #FFF000; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#frame1").data({mdownX:-1,mdownY:-1});//-1で初期化(mousemoveでの判定も兼ねる) $("img#handle").mousedown(function(e){ $("#frame1").data({mdownX:e.pageX,mdownY:e.pageY}); $(this).css('cursor','move'); return false; // falseを返してイベントバブルを停止 }); $(document).mouseup(function(){ $('img#handle').css('cursor',''); $("#frame1").data({mdownX:-1,mdownY:-1});//unbindはしない。位置を-1にリセット }); $(document).mousemove(function(e){ if($("#frame1").data('mdownX') < 0) return; var width = $("div#frame1").width(); var height = $("div#frame1").height(); $("div#frame1") .width(width + parseInt(e.pageX - $("#frame1").data("mdownX"))) .height(height + parseInt(e.pageY - $("#frame1").data("mdownY"))); $("#frame1").data({mdownX:e.pageX,mdownY:e.pageY}); }); }); </script> <title>zoom</title> </head> <body> <div id="frame1"> <img id="handle" src="image.bmp" alt="画像"/> </div> </body> </html>
お礼
steel_grayさん 有難うございます。 chromeとoperaでも問題ありませんでしたでした。 unbindではなく、初期化して条件分岐で解決するわけですね。 JavaやPHPでもよく使う手なのに、unbindにとらわれて全く気がつきませんでした。 まだまだ勉強が必要ですね。 どうも有難うございました。