HTML5 Tutorial – 46 – Finishing the Drag and Drop Program!

[ad_1]
Facebook –
GitHub –
Google+ –
LinkedIn –
reddit –
Support –
thenewboston –
Twitter –


Posted

in

by

Tags:

Comments

33 responses to “HTML5 Tutorial – 46 – Finishing the Drag and Drop Program!”

  1. slavicaprelogovic Avatar

    Thank you very much 🙂

  2. Robson Sousa Avatar

    I'm following this tutorial and all it's working for me.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="ISO-8859-1"/>
    <!– HTML5 Tutorial – 46 – Finishing the Drag and Drop Program –>
    <title>Finishing the Drag and Drop Program</title>
    <script type="text/javascript" src="tutorial46.js"></script>
    <link rel="stylesheet" href="main46.css">

    </head>

    <body style="background-color: #8EE5EE">

    <section id="leftbox">
    I dare you to drag an image in me!
    </section>

    <section id="rightbox">
    <img id="robson-picture" src="../images/robson.jpg">
    </section>

    </body>
    </html>

    function doFirst(){

    var mypic = document.getElementById("robson-picture");
    mypic.addEventListener("dragstart", startDrag, false);

    leftbox = document.getElementById("leftbox");

    leftbox.addEventListener("dragenter", function(event){event.preventDefault();}, false);
    leftbox.addEventListener("dragover", function(event){event.preventDefault();}, false);
    leftbox.addEventListener("drop", dropped, false);
    }

    function startDrag(event){

    var code = '<img id="robson-picture" src="../images/robson.jpg">';

    event.dataTransfer.setData('Text', code);
    }

    function dropped(event){
    event.preventDefault();
    leftbox.innerHTML = event.dataTransfer.getData('Text');

    }

    window.addEventListener("load", doFirst, false);

    @CHARSET "ISO-8859-1";

    #leftbox{
    float: left;
    width: 400px;
    height: 400px;
    margin: 5px;
    border: 3px solid blue;
    }

    #rightbox{
    float: left;
    width: 400px;
    height: 400px;
    margin: 5px;
    border: 3px solid red;
    }

  3. Michael Isenhour Avatar

    My code doesn't work for some reason.

    function doFirst() {
    myPic = document.getElementById("facepic");
    myPic.addEventListener("dragstart", startDrag, false);
    leftbox = document.getElementById("leftbox");
    leftbox.addEventListener("dragenter", function(e) {e.preventDefault();}, false);
    leftbox.addEventListener("dragover", function(e) {e.preventDefault();}, false);
    leftbox.addEventListener("drop", dropped, false);
    }
    function startDrag(e) {
    var code = '<img src="cartoon_monkey.ico">';
    e.dataTransfer.setData('Text', code);
    }
    function dropped(e) {
    e.preventDefault();
    leftbox.innerHTML = e.dataTransfer.getData('Text');
    }
    window.addEventListener("load", doFirst, false);

  4. Safir Monroe Avatar

    I keep getting the error "data:text/html,chromewebdata:1 Not allowed to load local resource: " when i upload the JavaScript to google chrome. Any suggestions?

  5. Sukanta Roy Sujan Avatar

    Can anyone give me the source link of this tutorial ?

  6. Sebastian Miletic Avatar

    Using the exactly same code as you do, I can drag image, but it doesn't show itself in the leftbox :/ 

    function doFirst() {

         myPic = document.getElementById("facepic");
         myPic.addEventListener("dragstart", startDrag, false);
         leftbox = document.getElementById("leftbox");
         leftbox.addEventListener("dragenter", function(e) {e.preventDefault();}, false);
         leftbox.addEventListener("dragover", function(e) {e.preventDefault();}, false);
         leftbox.addEventListener("drop", dropped, false);

    }

    function startDrag(e) {

         var code = '<img id = "facepic" src = "images/sebastian.jpg" width = "150" height = "100"';
         e.dataTransfer.setData('Text', code);

    }

    function dropped(e) {

         e.preventDefault();
         leftbox.innerHTML = e.dataTransfer.getData('Text');

    }

    window.addEventListener("load", doFirst, false);

  7. Stephan van den Nouwland Avatar

    The code still works and thanks to Paul Pantiru. Please watch out for the use of capitals!
    If you have problems, use the debugger(F12) in Chrome to find your mistake!

  8. Jason C Avatar

    is there jquery version to this?

  9. Edik Manoukian Avatar

    Hello,
    I wanted to know if it was possible to use this to add 5 different pictures in the same box, using the one on the right to the left and make the ones on the left movable and resizable and removable, and if it is, how may I do it? Thank you.

  10. Bo Mo Avatar

    How do you detect whether the space is already occupied or not? My picture just gets 'absorbed' by the in place picture.

  11. Paul Pantiru Avatar

    If it doesn't work, try replaceing "Text" in  —  e.dataTransfer.setData('Text', code);  —    and in   —- e.dataTransfer.getData(''Text'); —  with something else(for example, you can but 'bacon' there).

    Here have all the code:

    function doFirst(){
        mypic = document.getElementById('facepic');
        mypic.addEventListener('dragstart', startDrag, false);
        leftbox = document.getElementById('leftbox');
        leftbox.addEventListener("dragenter", function(e){e.preventDefault();}, false);
        leftbox.addEventListener("dragover", function(e){e.preventDefault();}, false);
        leftbox.addEventListener("drop", dropped, false);
    }
    function startDrag(e){

        var code = '<img id="facepic" src="IMAGE PATH HERE">';
        e.dataTransfer.setData('bacon', code);

    }
    function dropped(e){
        e.preventDefault();
        leftbox.innerHTML = e.dataTransfer.getData('bacon');    
    }
    window.addEventListener('load', doFirst, false);            

  12. HNlazy Avatar

    this code is not working. Please help

  13. Adi Pop Avatar

    if you have more pictures, how do you go the other in drag & drop ?!

  14. lageveld Avatar

    Nothing wrong with the code in tutorial but for copy/paste purposes:

    function doFirst(){
        mypic = document.getElementById('facepic');
        mypic.addEventListener('dragstart', startDrag, false);
        leftbox = document.getElementById('leftbox');
        leftbox.addEventListener("dragenter", function(e){e.preventDefault();}, false);
        leftbox.addEventListener("dragover", function(e){e.preventDefault();}, false);
        leftbox.addEventListener("drop", dropped, false);
    }
    function startDrag(e){
        var code = '<img src="YOURPIC.jpg">';
        e.dataTransfer.setData('Text', code);
    }
    function dropped(e){
        e.preventDefault();
        leftbox.innerHTML = e.dataTransfer.getData('Text');    
    }
    window.addEventListener('load', doFirst, false);

  15. scholesyfan Avatar

    i have replicated the code letter for letter, but not getting the required functionality. In firefox it opens up a new window, and in chrome it does not work.

  16. Vijay Choudhary Avatar

    Thanks a lot BUCKY…………

  17. Rafael Piotto Avatar

    Nowadays you need to set up draggable="true" in a source element

  18. LordStarBlue Avatar

    Thank you for the tutorial !

  19. MasterQuestMaster Avatar

    You could use Ajax for this.

  20. danny boy villaviray Avatar

    need help…for my project…tmx again..=)

  21. danny boy villaviray Avatar

    sir your tutorials are great, they help a lot and your teaching skills is very cool… sir I have a question, in the html5 drag and drop…it can be possible that every drop of the picture there will also a query happening????? like every time i will drop the picture on the leftbox an information will be added to the database??????is that possible??????
    THANK YOU VERY MUCH…=)

  22. jonniegrieve Avatar

    Spent ages working on this one! Who'd have thought a simple small b would cause so many problems! Great tutorial!

  23. Tiberiu Tanasescu Avatar

    I really enjoy your tutorials, you've got some awesome explaining skills

  24. Nelson Correia Avatar

    Read about addEventListener in Smashing literature. Wasn't clear on it until I watched this tutorial. Your teaching style is great. Looking forward to viewing the rest!

  25. Where The Story Ends Avatar

    You can change var code = document.getElementById('rightbox').innerHTML; so it would get the image data automatically.

  26. Thomas Schauser Avatar

    The answer is Google Chrome

  27. kevin white Avatar

    yeah it didn't work for me either . the code changes in chorme but it shows a broken img file on the screen i don't know why ,is that what you see.

  28. Lamine Fadiga Avatar

    I don't know why but my JS scripts never work.

  29. Jack Lei Ling Avatar

    superb! Bucky is the best teacher!

  30. john jones Avatar

    with this can i be able to create multiple selection/div boxes and be able to get them to drag and drop in there own boxes??

  31. Elliot Harris Avatar

    I am a high school teacher trying to de­velop a project for my web de­sign class where stu­dents create a robot using html5 by drag­ging and drop­ping its arms and legs together.

    What I’m re­ally looking for is a very simple drag and drop func­tion where the drag­gable ob­jects stay where you drop them any­where in­side a drop zone.

    Thanks!

  32. Rainie Le Avatar

    Hi, I would like to ask if i don't want the image to replace the text but on top of it, how should i go it?

Leave a Reply

Your email address will not be published. Required fields are marked *