※ ChatGPTを利用し、要約された質問です（原文：JQueryを使用して、画像をドラッグで拡大・縮小できるボタンを画像右）
JQueryを使用して、画像をドラッグで拡大・縮小できるボタンを配置する方法
このQ&Aのポイント
JQueryを使用して、画像をドラッグで拡大・縮小できるボタンを画像右下に配置する方法について質問があります。
firefox(3.6.3)ではmouseupによるmousemoveのunbindがうまく機能せず、mousemoveが維持される問題があります。
IE8やchrom、operaでは期待通りに動作しますが、時々chromでfirefoxと同様の不具合が発生します。修正方法を教えてください。
JQueryを使用して、画像をドラッグで拡大・縮小できるボタンを画像右
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">
<!--
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(){
$("img#handle").mousedown(function(e){
$("#frame1")
.data("mdownX" , e.clientX)
.data("mdownY" , e.clientY);
$(document).mousemove(function(e){
var width = parseInt($("div#frame1").css("width"),10);
var height = parseInt($("div#frame1").css("height"),10);
$("div#frame1").css({
width : width + (e.pageX - $("#frame1").data("mdownX")) + "px",
height : height + (e.pageY - $("#frame1").data("mdownY")) + "px"
});
$("#frame1")
.data("mdownX" , e.pageX)
.data("mdownY" , e.pageY);
});
});
$(document).mouseup(function(){
$(document).unbind("mousemove");
});
});
//-->
</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にとらわれて全く気がつきませんでした。 まだまだ勉強が必要ですね。 どうも有難うございました。