addEventlistenerの習作としてのdiv要素をドラッグするものの改良

Question

addEventListenerの習作として以下のようなものを作りました
ざっと見て問題点がいくつかありますが
1.ドラッグが早いと移動が追いつかず置いてけぼりになる
2.12行目、13行目のプロパティの設定について同様のやり方が(私が調べた内では)手持ちの書籍、ネット上でみあたらず、いいやり方なのかまずいやり方そもそも違う方法を取るべきなのか判断材料が無い

この２点について改良方法、意見を募集します

  1 //各divにmousedownをつける                             
  2 function addMousedown(moveTarget){
  3         for(var i=0;i<moveTarget.length;i++){
  4                 moveTarget[i].addEventListener("mousedown",
  5                                                 addMousemoveAndMouseup,
  6                                                 false);
  7         }
  8 }
  9 //mousedownを感知した場合の処理
 10 function addMousemoveAndMouseup(e){
 11 
 12         e.target.offsetY=e.clientY-e.target.offsetTop;
 13         e.target.offsetX=e.clientX-e.target.offsetLeft;
 14         //mousemoveイベントハンドラを付ける
 15         e.target.addEventListener("mousemove",
 16                         mouseMove,
 17                         false);
 18         //mouseupイベントハンドラを付ける
 19         e.target.addEventListener("mouseup",
 20                         removeEvent,
 21                         false);
 22 }
 23 function mouseMove(e){
 24         var X=e.clientX-e.target.offsetX;
 25         var Y=e.clientY-e.target.offsetY;
 26         e.target.style.top=Y+"px";
 27         e.target.style.left=X+"px";
 28 }
 29 function removeEvent(e){
 30         e.target.removeEventListener("mousemove",
 31                         mouseMove,
 32                         false);
 33         e.target.removeEventListener("mouseup",
 34                         removeEvent,
 35                         false);
 36 }
 37 
 38 window.onload=function(){
 39         //rootをcontainerに設定
 40         var root=document.getElementById("container");
 41 
 42         //各divを登録
 43         var moveTarget=root.getElementsByTagName("div");
 44         addMousedown(moveTarget);
 45 }

Answer 1

1. については、マウスカーソルと要素の相対位置をどこかに記憶しておく必要がある、ということですよね？

DOMエレメントにプロパティを生やすことになるので、ちょっと気持ち悪い感じがしないでも無いですけど、、、代替としてぱっと思いつくのがグローバル変数ぐらいなので、ダメということはないと思います。

もしくは、mouseMove をクロージャーにして、イベントハンドラそのものにその情報を持たせるという案も考えられます。

例えば、次のようにです。

function addMousedown(moveTarget){
    // 略
}

function addMousemoveAndMouseup(e){
    var target = e.target;
    var offsetY = e.clientY - e.target.offsetTop;
    var offsetX = e.clientX - e.target.offsetLeft;

    var mouseMove = function (e) {
        var X = e.clientX - offsetX;
        var Y = e.clientY - offsetY;
        target.style.top = Y + "px";
        target.style.left = X + "px";
    };

    var removeEvent = function () {
        document.removeEventListener("mousemove", mouseMove, false);
        document.removeEventListener("mouseup", removeEvent, false);
    };

    document.addEventListener("mousemove", mouseMove, false);
    document.addEventListener("mouseup", removeEvent, false);
}

window.onload = function(){
    // 略
}

この方法ならさっきのような dragging などという id を付けたり外したりする必要もありません。イベントハンドラそのものが、ドラッグ中の要素を持っているので。

その代わり、ドラッグの開始時に新しいクロージャーを生成する必要があるので、mousemove や mouseup でイベントの付け外しが必要になります。

Comments

[gyojin]

二つの質問に両方答えていただいた上にサンプルまで付けて下さってありがとうございます。
PHPに続いてjavascriptをぽちぽち始めてみたのですがオブジェクト指向や言語の構造に関しては言語の参考書とは別の資料が必要だなーと痛感します。

Answer 2

1. については div にイベントハンドラを仕込んでいるため、あまり早くドラッグすると div の枠外までマウスカーソルが移動してしまい、イベントが拾えなくなるからです（ご理解されているっぽいですけど）。

これは document などにイベントハンドラを仕込むようにすれば回避できます。

例えばこんな感じにです。

function addMousedown(moveTarget){
    // 略
}

function addMousemoveAndMouseup(e){
    // もし id が dragging の要素があれば id を引っぺがす
    var target = document.getElementById('dragging');
    if (target) {
        target.removeAttribute('id');
    }

    // ドラッグ中のオブジェクトの id に dragging を設定
    e.target.setAttribute('id', 'dragging');

    e.target.offsetY = e.clientY - e.target.offsetTop;
    e.target.offsetX = e.clientX - e.target.offsetLeft;

    // document にイベントハンドラを設定
    document.addEventListener("mousemove", mouseMove, false);
    document.addEventListener("mouseup", removeEvent, false);
}

function mouseMove(e){
    // id が dragging の要素を取り出して処理する
    var target = document.getElementById('dragging');
    if (target) {
        var X = e.clientX - target.offsetX;
        var Y = e.clientY - target.offsetY;
        target.style.top=Y+"px";
        target.style.left=X+"px";
    }
}

function removeEvent(e){
    // document のイベントハンドラを削除
    document.removeEventListener("mousemove", mouseMove, false);
    document.removeEventListener("mouseup", removeEvent, false);
}

window.onload = function(){
    // 略
}

この例だと mousemove とか mouseup とかのイベントハンドラを付け外しする必要もありませんけどね(^_^;)