JQueryを使用して、画像をドラッグで拡大・縮小できるボタンを画像右

解決済

質問者：s_h_i_b_a
質問日時：2010/06/11 17:56
回答数：1件

JQueryを使用して、画像をドラッグで拡大・縮小できるボタンを画像右下に配置しようと考えています。
以下のようなコードを作成したのですが、firefox(3.6.3)だとmouseupによるmousemoveのunbindがうまくいかず、mousemoveが維持されます。
IE8、chrom、operaでは考えたとおりの動きをしますが、ときたまchromでfirefoxと同様の不具合がおきます。
どのようにコードを修正すればよいでしょうか？

------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. …
<script type="text/javascript">

</script>
<title>zoom</title>
</head>
<body>
<div id="frame1">
<img id="handle" src="image.bmp" alt="画像"/>
</div>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： steel_gray
回答日時：2010/06/12 15:53

確認は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. …
<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>

- 0
- 件

通報する

この回答へのお礼

steel_grayさん有難うございます。
chromeとoperaでも問題ありませんでしたでした。

unbindではなく、初期化して条件分岐で解決するわけですね。
JavaやPHPでもよく使う手なのに、unbindにとらわれて全く気がつきませんでした。
まだまだ勉強が必要ですね。

どうも有難うございました。

通報する

お礼日時：2010/06/15 12:21

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！