Kullanıcı:
Filtreler

JavaScript Jquery 2 Nesnenin Koordinatı

spac
  • Kullanıcı spac
  • Başlangıç tarihi Başlangıç tarihi
  • - Programlama & Yazılım Geliştirme
spac

spac

Kayıtlı Üye
Katılım
3 Nisan 2013
Mesajlar
763
Tepkime puanı
0
Puan
16
Yaş
26
Konum
İstanbul
1 Sorum olacaktı yardımcı olursanız sevinirim

L3j0Qz.png
şimdi 1. kare sürüklenip bırakıldığı zaman X koordinatını vermesini istiyorum 2. karede de sürüklenip bırakıldığın da Y koordinatı vermesini istiyorum. Bunu nasıl yapabilirim


YboRDD.png


benim yazdığım bu fakat karenin dışına tıklayınca yine koordinat veriyor ve hangi kareyi oynatırsam onun koordinatları veriliyor. Yani 1. kareyi oynattığımda X koordinatı 1.kare de Y koordinatı ise 2.karede bunu nasıl düzeltebilirim ?
 
jQuery ui draggable'ın drag eventi var.

Bu event'i dinleyerek, taşınan objenin geometrik bilgilerini getBoundingClientRect methodu ile alabilirsin.

Örnek;

Kod: 
$(function() {
  $("#kutu-1, #kutu-2").draggable({
    cursor: "crosshair",
    cursorAt: { left: -5, top: -5 }
  });
  
  $("#kutu-1").on("drag", function(event, ui) {
    $("#kutu-1").html(event.target.getBoundingClientRect().left);
  });
  
  
  $("#kutu-2").on("drag", function(event, ui) {
    $("#kutu-2").html(event.target.getBoundingClientRect().top);
  });
});

Demo
 
Şu programlamayı bi öğrenemedim gitti ya :(
 
jebi' Alıntı:
jQuery ui draggable'ın drag eventi var.

Bu event'i dinleyerek, taşınan objenin geometrik bilgilerini getBoundingClientRect methodu ile alabilirsin.

Örnek;

Kod: 
$(function() {
  $("#kutu-1, #kutu-2").draggable({
    cursor: "crosshair",
    cursorAt: { left: -5, top: -5 }
  });
  
  $("#kutu-1").on("drag", function(event, ui) {
    $("#kutu-1").html(event.target.getBoundingClientRect().left);
  });
  
  
  $("#kutu-2").on("drag", function(event, ui) {
    $("#kutu-2").html(event.target.getBoundingClientRect().top);
  });
});

Demo
Genişletmek için tıkla ...


hocam çok teşekkür ederim yalnız Y eksenin koordinatı virgüllü çıkıyor hep
 
Cevap yazmak için giriş yap yada kayıt ol.
Kişiselleştirme

Tema editörü

Ayarlar Renkler

  • Mobil kullanıcılar bu fonksiyonları kullanamaz.

    Alternatif header

    Farklı bir görünüm için alternatif header yapısını kolayca seçebilirsiniz.

    Görünüm Modu Seçimi

    Tam ekran ve dar ekran modları arasında geçiş yapın.

    Izgara Görünümü

    Izgara modu ile içerikleri kolayca inceleyin ve düzenli bir görünüm elde edin.

    Resimli Izgara Modu

    Arka plan görselleriyle içeriğinizi düzenli ve görsel olarak zengin bir şekilde görüntüleyin.

    Yan Paneli Kapat

    Yan paneli gizleyerek daha geniş bir çalışma alanı oluşturun.

    Sabit Yan Panel

    Yan paneli sabitleyerek sürekli erişim sağlayın ve içeriğinizi kolayca yönetin.

    Box görünüm

    Temanızın yanlarına box tarzı bir çerçeve ekleyebilir veya mevcut çerçeveyi kaldırabilirsiniz. 1300px üstü çözünürler için geçerlidir.

    Köşe Yuvarlama Kontrolü

    Köşe yuvarlama efektini açıp kapatarak görünümü dilediğiniz gibi özelleştirin.

  • Renginizi seçin

    Tarzınızı yansıtan rengi belirleyin ve estetik uyumu sağlayın.
Geri