Basit Sürükle Bırak Uygulaması

Basit Sürükle Bırak Uygulaması

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div {
            float:left;
            width:150px;
            height:150px;
            margin:20px;
            padding: 10px;
            border: 1px solid #a4a4a4;
        }
    </style>
    <script>
       
        function Surukle(Olay) {
            Olay.dataTransfer.setData("text", Olay.target.id);
        }
       
        function UzerineBirakabilsin(Olay) {
            Olay.preventDefault();
        }
       
        function Biraklinca(Olay) {
            UzerineBirakabilsin(Olay);
            var SuruklenenVeri = Olay.dataTransfer.getData("text");
            Olay.target.appendChild(document.getElementById(SuruklenenVeri));
        }
       
    </script>
    </head>
    <body>
        <div id="Bir" ondrop="Biraklinca(event)" ondragover="UzerineBirakabilsin(event)"></div>
        <div id="Iki" ondrop="Biraklinca(event)" ondragover="UzerineBirakabilsin(event)"></div>
        <div id="Uc"  ondrop="Biraklinca(event)" ondragover="UzerineBirakabilsin(event)"></div>
        <div id="Dort"  ondrop="Biraklinca(event)" ondragover="UzerineBirakabilsin(event)"></div>
       
        <img src="https://bestanimations.com/media/butterflys/315739394butterfly-animated-gif-44.gif" style="width:100px; height: 90px" draggable="true" ondragstart="Surukle(event)" id="Kelebek"/>
    </body>
</html>

 

Yorumunuzu Ekleyin

Fonksiyonlar
Olaylar (Events)
Fare Uygulamaları
Pencere Uygulamaları
Sayfadaki Nesnelere Erişim
Filitre Uygulamaları
Resim Değiştirme Uygulamaları
Sayaç(Counter) Uygulaması
Yükleniyor...