如何獲得onmouseup的座標？

我已經構建了一個JavaScript應用程序，用於在同一頁面中將div從一個地方拖放到另一個地方。我做了拖動部分。我有div的座標，我必須放棄div，但我被卡在應該引入匹配目標區域的div的條件的部分。基本上divs可以放在任何div上面，但是如果在onmouseup事件中，我在任何接近該目標div的地方，它們必須正好落在目標div上面。我想分配我的拖動（onmousdown）div的頂部和左側屬性到目標股利但我可能是錯誤的..請指導我通過這部分。這裏是一部分，我需要幫助：如何獲得onmouseup的座標？

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; 
}

這裏是鏈接到我的代碼：jsfiddle JavaScript部分必須HTML裏面寫，使其正常工作

來源

2017-08-04 Del Monte

的問題的標題有誤導之嫌，你真的似乎遇到的問題是找到目標div的座標。儘管您可能想要使用pageX和pageY座標，因爲它們相對於呈現的頁面而不是視口（即用戶正在查看的窗口），所以抓取的鼠標座標很好。 0,0使用客戶端座標將隨用戶滾動而改變，而頁面座標將引用網頁上的特定點。

至於找你降的div你可以使用的元素有關的方法getClientBoundingRect，並使用返回的對象上top，right，bottom，並left屬性來確定鼠標的pageX和pageY座標內（或接近內部）元素。

也許有更好的辦法，但這是我會怎麼做的。

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 
     } 
    } 
}

來源

2017-08-04 16:58:46 Don

你能更新我的jsfiddle鏈接嗎？感謝您的答案btw .. –

我會在我的答案寫一個例子，不會寫入你的代碼，但你。 – Don

當然..一個例子就足夠了:) –

如何獲得onmouseup的座標？

回答

相關問題