Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make drag an drop in website

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 240
    Comment on it

    Hello Reader's if you want to use drag and drop feature in website then you can use the code as below:- First create file drag.html and paste the following code in it.

    <img id="source" src="../files/images/yourimage.jpg" draggable="true"
    ondragstart="drag(event)" width="557" height="326">
    
    

    Now create the script in header section of the file

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

    When you run this page the page will show two div, first div will show your image and another will be blank. But when you select your image and try to drag into another div your image will move to second div and first div will be empty now. It's very easy and simple example to see the drag and drop feature.

    PS don't forgot give image file location at the html page.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: