• Buradasın

    HTML'de sürükle bırak nasıl yapılır?

    Yazeka

    Arama sonuçlarına göre oluşturuldu

    HTML'de sürükle bırak (drag and drop) işlemi yapmak için aşağıdaki adımlar takip edilmelidir:
    1. Elementi Sürüklenebilir Hale Getirme:
      draggable="true"
      attribute'ü kullanarak bir elementi sürüklenebilir hale getirin 12. Örneğin:
      <img draggable="true" src="image.png">
      1.
    2. Sürükleme Davranışını Tanımlama: Sürükleme işlemini başlatan olayı ve sürüklenecek veriyi belirlemek için
      ondragstart
      event'ini kullanın ve bu event'te
      drag(event)
      fonksiyonunu çağırın 13. Bu fonksiyon,
      event.dataTransfer.setData()
      metodu ile sürüklenecek verinin tipini ve değerini ayarlar 3.
    3. Bırakma Hedefini Etkinleştirme: Sürüklenen verinin bırakılabileceği bir hedef (drop target) oluşturmak için
      ondragover
      event'ini kullanın ve
      event.preventDefault()
      metodu ile tarayıcının varsayılan davranışını önleyin 13. Örneğin:
      <div ondragover="event.preventDefault()"></div>
      1.
    4. Bırakma İşlemini Gerçekleştirme:
      ondrop
      event'ini kullanarak bırakma işlemini tamamlayın ve sürüklenen veriyi hedef alana yerleştirin 13. Örneğin:
      <div ondrop="drop(event)"></div>
      1.
    Bu adımlar, HTML5'in sunduğu yerleşik sürükle bırak olayları sayesinde minimal kodlamayla uygulanabilir 1.
    5 kaynaktan alınan bilgiyle göre:

    Konuyla ilgili materyaller

    HTML5 ile neler yapılabilir?

    HTML5 ile yapılabilecek bazı şeyler: Dinamik web sayfaları oluşturma. Video ve ses oynatma. Canvas ve SVG ile grafik oluşturma. Form geliştirme. Mobil uyumluluk. Yerel depolama. Web API'leri ile entegrasyon.