画像を移動するプログラムが作りたいです

Question

クリックした画像をマウスの動きと同じように動かして、もう一度クリックしたらそこに画像が置けるようなプログラムが作りたいです。（ドラッグ＆ドロップではない）作ってみたのですが、画像の移動まではできたものの、画像が置けません。だれかアドバイスまたは助言をお願いします。下のソースの概要はoffsetでid idouの要素の座標を求め、クリックした部分の座標との距離の大きさを「ex-cx,ey-cy」で出しています。その数値を動かしているポインタの座標から引いて画像があるべき座標を出しています。また、flagで判定して-1のときに置くようにしたのですが全然置けませんでした。

<!-- jquery使う--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <!-- 終了 --> <script><!-- var flag = -1; $(document).ready(function(){ $("#idou").click(function(e){ flag = -flag; var ex = e.clientX; var ey = e.clientY; //要素の座標 var ox = $("#idou").offset().left; var oy = $("#idou").offset().top; if(flag==1){ $("html").mousemove(function(e){ //マウスの座標取得 var cx = e.clientX; var cy = e.clientY; var rx = cx + ox - ex; // var ry = cy + oy - ex; $("#idou").css({position:"absolute",top:ry,left:rx}); }); } }); }); -->

Answer 1

flagを判定するif文をmousemoveの外ではなく内側に書くと置けるようになると思います。
それと、var ry = cy + oy - ex; のところの最後はeyですね。

これで意図した動作になると思いますが、
その他で気になったところも書いておきます。

• mousemoveはclickするたびに設定する必要はないので、click関数の外に書いたほうがよさそう。
• clientX、cliengYはウィンドウ上の座標のため、ページにスクロールがあると位置がずれるのでpageX、pageYを使うほうがよさそう。
• flagはグローバル変数にしないほうよさそう。
• $("#idou")は何度か使うので、毎回取得せずに変数に入れて使うほうがよさそう。

参考までに修正したコードを貼っておきます。

$(document).ready(function(){
	var	flag = -1,
			ex,
			ey,
			ox,
			oy,
			$idou = $("#idou");

	$idou.click(function(e){
		flag = -flag;
		ex = e.pageX;
		ey = e.pageY;
		ox = $idou.offset().left;
		oy = $idou.offset().top;
	});

	$("html").mousemove(function(e){
		if(flag==1){
			var	cx = e.pageX,
					cy = e.pageY,
					rx = cx + ox - ex,
					ry = cy + oy - ey;
			$idou.css({position:"absolute",top:ry,left:rx});
		}
	}); 
});

Comments

[munekoda]

できました。ありがとうございます