addEventListenerの習作として以下のようなものを作りました
ざっと見て問題点がいくつかありますが
1.ドラッグが早いと移動が追いつかず置いてけぼりになる
2.12行目、13行目のプロパティの設定について同様のやり方が(私が調べた内では)手持ちの書籍、ネット上でみあたらず、いいやり方なのかまずいやり方そもそも違う方法を取るべきなのか判断材料が無い
この2点について改良方法、意見を募集します
lang
1 1 //各divにmousedownをつける 2 2 function addMousedown(moveTarget){ 3 3 for(var i=0;i<moveTarget.length;i++){ 4 4 moveTarget[i].addEventListener("mousedown", 5 5 addMousemoveAndMouseup, 6 6 false); 7 7 } 8 8 } 9 9 //mousedownを感知した場合の処理 10 10 function addMousemoveAndMouseup(e){ 11 11 12 12 e.target.offsetY=e.clientY-e.target.offsetTop; 13 13 e.target.offsetX=e.clientX-e.target.offsetLeft; 14 14 //mousemoveイベントハンドラを付ける 15 15 e.target.addEventListener("mousemove", 16 16 mouseMove, 17 17 false); 18 18 //mouseupイベントハンドラを付ける 19 19 e.target.addEventListener("mouseup", 20 20 removeEvent, 21 21 false); 22 22 } 23 23 function mouseMove(e){ 24 24 var X=e.clientX-e.target.offsetX; 25 25 var Y=e.clientY-e.target.offsetY; 26 26 e.target.style.top=Y+"px"; 27 27 e.target.style.left=X+"px"; 28 28 } 29 29 function removeEvent(e){ 30 30 e.target.removeEventListener("mousemove", 31 31 mouseMove, 32 32 false); 33 33 e.target.removeEventListener("mouseup", 34 34 removeEvent, 35 35 false); 36 36 } 37 37 38 38 window.onload=function(){ 39 39 //rootをcontainerに設定 40 40 var root=document.getElementById("container"); 41 41 42 42 //各divを登録 43 43 var moveTarget=root.getElementsByTagName("div"); 44 44 addMousedown(moveTarget); 45 45 } 46
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/07/17 04:50