Html Sürükle Bırak , Drag And Drop

  1. ucyildiz
    3
    69
    24.04.2019 12:22:00

    Html 5 ile sürkle bırak işlemleri yapılabiliyormuş , ben bir divdeki yazıyı başka bir dive nasıl sürükleyip bırakabilirim , drag and drop işlemini bir divden başka bir dive yazı sürüklemek için kullanmak istiyorum

    html javascript 3 ay önce 103 Görüntüleme

( 1 ) Cevap

  1. emir56
    0
    247
    11.07.2019 06:36:00

    Aşağıdaki gibi yapabilirsin, üstelik birinci divden ikinciye attıktan sonra, birinciye tekrar götürebilirsin geri,

    html-drag-and-drop-surukle-birak

    <html>
    <head>
    <style>
    #divDolu, #divBos {
      border: 1px solid black;
      width: 120px;
      height: 50px;
      margin: 15px;
      padding: 15px;
    }
    </style>
    <script>
    
    // allow to drop
    function birakIzinVer(ev) {
      ev.preventDefault();
    }
    
    //drag
    function surukle(ev) {
      ev.dataTransfer.setData("text", ev.target.id);
    }
    
    //drop
    function birak(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data));
    }
    </script>
    </head>
    <body>
    
    
    <p>Aşağıdaki yazıyı sürükleyin ve diğer kutuya bırakın</p>
    
    <div id="divDolu" ondrop="birak(event)" ondragover="birakIzinVer(event)">
      <p draggable="true" ondragstart="surukle(event)" id="dragId" > code.replyfeed.com </p>
    </div>
    
    <div id="divBos" ondrop="birak(event)" ondragover="birakIzinVer(event)"></div>
    
    </body>
    </html>
    

Cevabınız