• Breaking News

    drag and drop any image but how

    <!DOCTYPE HTML>

    <html>

    <head>

    <style>

    #div1 {

      width: 350px;

      height: 300px;

      padding: 10px;

      border: 1px solid #aaaaaa;

    }

    </style>

    <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>

    <br>

    <img id="drag1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdU0M4zaR48DYGHsT_eEfNVQdAJ_YRWeyh3uMQI-lXqIcS4c2G-5rDT1RNFW42xm0zE5-TNIxa31ArhUyAemDU6UVUPqUkvO5wcxvudpa74f2roEfGgOd-ORvlbCld4waJuwWzhuga78_5/s2048/alistair-dent-HZAcR-tDSCI-unsplash.jpg"{ यहाँ पर आप किसी भी image का link डाल सकते है } draggable="true" ondragstart="drag(event)" width="336" height="300">


    </body>

    </html>

    यहाँ पर image  को पकड़ कर box  के अंदर डाले 



    कोई टिप्पणी नहीं

    Post Top Ad

    Post Bottom Ad