JS drag and drop hakkında
Merhaba,
Tarayıcının ortasında bir kutu düşünün, bu kutunun tarayıcı içerisinde sağ sola veya herhangi bir noktaya bırakıldığında clientX ve clientY değeri oluşmakta. Benim istediğim ise bu kutuyu tutup, bıraktığım yerin koordinatlarını almak.
// Kutu
<div id="dragWindow">
<div class="box" draggable="true" ></div>
</div>
// kod parçacığı
document.getElementById("dragWindow").addEventListener("mousedown", e => {
console.log(e);
})
// Sonuç
// Basıldığı zaman bulunduğu clientX, clientY değerlerini alamaktadır.
Desteğiniz için teşekkürler.
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (3)
Eğer "dragWindow" elementinin etrafındaki koordinatları öğrenmek istiyorsanız, "dragWindow" elementinin "offsetLeft" ve "offsetTop" özelliklerini kullanabilirsiniz. Bu özellikler, "dragWindow" elementinin "offsetParent" elementine (yani genellikle "body" elementine) göre sağ ve üst kenar uzaklığını verir.
Bu özelliklerle birlikte, "dragWindow" elementinin etrafındaki koordinatları aşağıdaki gibi hesaplayabilirsiniz:
const dragWindow = document.getElementById("dragWindow");
const left = dragWindow.offsetLeft + e.clientX;
const top = dragWindow.offsetTop + e.clientY;
Bu, "dragWindow" elementinin "mousedown" olay dinleyicisinde yapılabilir. Bu koordinatları, "dragWindow" elementini sürükleme ve bırakma işlemlerinde kullanabilirsiniz.
Umarım bu bilgi size yardımcı olmuştur.
Cevabın için teşekkür ederim ama yazdınız kod; mouse ile gezinti yaparak clientX,clinetY koordinatlarını veriyor.
Bunu alabiliyorum ama soru şu ki,drag and drop ile kutuyu basılı tuttup bıraktığım yerin koordinatlarına ihtiyacım var.
<div id="log"></div>
<script>
$(document).bind('mousemove',function(e){
$("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
});
jQuery(function($) {
var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function(event) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
});
});
</script>
fikrimce böyle bişey istiyosundur