• 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 işlemi yapmak için aşağıdaki adımlar izlenebilir:
    1. Öğeyi sürüklenebilir hale getirme 24. Bir öğenin sürüklenebilir olması için 
      draggable
      özelliğine 
      true
      değeri atanmalıdır 24.
    2. Sürükleme işlemini başlatma 5. Kullanıcı bir öğeyi sürüklemeye başladığında, tarayıcı genellikle sürüklenen öğeye ilişkin geri bildirim sağlayan varsayılan bir "hayalet" görüntü sağlar 5. Bunun yerine özel bir görsel sağlamak için 
      setDragImage
      yöntemi kullanılabilir 5.
    3. Bırakma işlemini tanımlama 24. Bir öğenin bırakılacağı yeri belirlemek için 
      ondrop
      veya 
      drop
      olayları kullanılır 24.
    4. Veri aktarımı 5. Sürüklenen veriler, 
      dataTransfer
      nesnesi kullanılarak aktarılabilir 5. Bu nesne, sürükleme işleminde gönderilen verileri tutar ve 
      setData
      yöntemi ile veri türü ve değeri belirlenir 5.
    Örnek bir sürükle-bırak kodu:
    <!DOCTYPE HTML>
<html>
  <head>
    <script>
      function allowDrop(ev) {
        ev.preventDefault();
      }
      function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
      }
      function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
      }
    </script>
  </head>
  <body>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
  </body>
</html>
    Bu örnek, basit bir sürükle-bırak işlemini göstermektedir 4.
    Mobil cihazlarda sürükle-bırak API'si desteklenmemektedir 2.
    5 kaynaktan alınan bilgiyle göre:

      Yanıtı değerlendir

      5 kaynak

      1. geeksforgeeks.org
        1
      2. linkedin.com
        2
      3. developer.mozilla.org
        3
      4. htmldersleri.org
        4
      5. upgrad.com
        5

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