onmouseupでコーディネートを受けるには？

Question

私は同じページ内のある場所から別の場所にdivをドラッグアンドドロップするためのjavascriptアプリケーションを構築しました。私はドラッグ部分を作った。私はdivを落とさなければならないdiv（s）の座標を持っていますが、target zoneでdivを一致させる条件を導入すべき部分にはまっています。基本的にdivはdivの上にドロップすることができますが、onmouseupイベントの場合はターゲットdivのすぐ近くにドロップする必要があります。私は私のドラッグされた（onmousdown）divの上部と左の属性をターゲットのdivに割り当てることを考えていますが、私は間違っているかもしれません..この部分を通して私を案内してください。ここ は、私は助けを必要とする部分である：、jsfiddle javascriptの一部それを動作させるために、HTMLの中に記述する必要があります適切に

Answer 1

質問のタイトルは誤解を招くです：ここでは

function mouseUp(e) 
{ 
    e = e || window.event; 
    var mousePos = mouseCoords(e); 
    var itemPosition = getPosition(id); 
    //console.log("This is at: "+itemPosition); 
    //console.log(mousePos); 
    console.log(getPosition(id)); 
    for(var i=0;i<destination.length;i++) 
    { 
     var curTarget = destination[i]; 
     var targPos = getPosition(curTarget); 
     var targWidth = parseInt(curTarget.offsetWidth); 
     var targHeight = parseInt(curTarget.offsetHeight); 
     var temp = document.elementFromPoint(event.clientX, event.clientY); 

    } 


    id = null; 
} 

は私のコードへのリンクがありますあなたが本当に問題を抱えているように見えるのは、ターゲットdivsの座標を見つけることです。レンダーされたページに対してであり、ビューポートではなく（すなわち、ユーザが見ているウィンドウ）、座標としてpageXとpageY座標を使用したいと思うかもしれませんが、あなたはclientXとclientYを使ってマウス座標をちょうどうまくつかんでいます。クライアント座標を使用する0,0は、ユーザーがスクロールするときに変更されますが、ページ座標はWebページ上の特定の場所を参照します。あなたのドロップを見つけるためとして

は、あなたが要素にメソッドgetClientBoundingRectを使用して、マウスのpageXとpageY座標が内側にあるかどうかを判断するために返されたオブジェクトにtop、right、bottom、およびleftプロパティを使用することができるのdiv（または内側に近い）要素。

もっと良い方法があるかもしれませんが、これが私のやり方です。

function mouseUp(e){ 
    var targets = document.getElementsByClassName("drop_here"); 
    for(var i=0;i<targets.length;i++){ 
     var bounds = targets[i].getClientBoundingRect(); 
     var lenience = 5; 
     if(e.pageX < bounds.right + lenience && 
     e.pageX > bounds.left - lenience && 
     e.pageY < bounds.top - lenience && 
     e.pageY > bounds.bottom + lenience){ 
     //do my work here 
     } 
    } 
}