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