JS drag and drop hakkında

siyahkalem 695 gün önce

374 defa görüntülendi

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!

Spam olarak işaretle

Cevaplar (3)

h4ckdr0

695 gün önce

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.

#011769

siyahkalem

695 gün önce

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.

#011768

aykhan

695 gün önce

$(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

#011765