javascriptで困っています
javascriptで、スマホでタッチしたところに四角を描いて、それをtouchmoveイベントで取得した位置に動かし、ドラッグして、はなしたところでその四角を消すというのを作
ろうとしています。思っているように上手く動かないのですが、どのように修正すればいいのでしょうか？少し動いた所で止まってしまい、touchmoveイベントの位置の値を取得
できてないように思います。四角なしで試すとtouchmoveイベントの位置の値を
取得できます
教えていただければありがたいです。よろしくお願いします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=320, user-scalable=no" />
<title>test</title>
<style type="text/css">
#panel_board{
width:320px;
height:384px;
position:relative;
}
#move_panel{
width:64px;
height:64px;
position:absolute;
background-color:#0F9;
z-index:10;
}
</style>
<script type="text/javascript" charset="utf-8">
<!--
function init() {
var panel_board = document.getElementById("panel_board");
panel_board.addEventListener("touchstart", function(e){
//クリックしたの場所のマス目
var x = e.touches[0].pageX;
var y = e.touches[0].pageY;
// 新規に要素div（タグ）を生成
var ele = document.createElement("div");
//idをつける
ele.id = "move_panel";
//生成した要素の位置を決める
ele.style.left=x+"px";
ele.style.top=y+"px";
// panel_boardに生成した要素を追加
panel_board.appendChild(ele);
}, false);
panel_board.addEventListener("touchmove", function(e){
//動いた位置を取得
var xx = e.touches[0].pageX;
var yy = e.touches[0].pageY;
//move_panelを動かす
document.getElementById("move_panel").style.left = xx+'px';
document.getElementById("move_panel").style.top = yy+'px';
//位置を表示
document.getElementById("txt0").innerHTML = "ムーブ";
document.getElementById("txt1").innerHTML = xx;
document.getElementById("txt2").innerHTML = yy;
}, false);
panel_board.addEventListener("touchend", function(e){
//要素を消す
var mp = document.getElementById("move_panel");
mp.parentNode.removeChild(mp);
}, false);
}
// -->
</script>
</head>
<body onLoad="init();">
<div id="panel_board">
</div>
<span id="txt0"></span><br />
X:<span id="txt1"></span>, Y:<span id="txt2"></span><br />
</body>
</html>
お礼
ご回答ありがとうございます！ 勉強になりました！！