Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Josh Keenan
Josh Keenan
20,315 Points

Drag and drop

So I am making a drag and drop thing but when images are dragged from their start point they are no longer there and have moved permanently until page refresh

I know I'll probably have to use AJAX but does someone know how to do this. Load a new copy of the image back straight away.

Thanks guys.

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Can you please provide your code so we can see what is going on?

2 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Okay so the reason you don't get a copy is because you're just using appendChild and using the id attribute to reference the original element that was dragged. If you instead use the DOM method cloneNode(), you get a copy of that element instead.

Also, your methods for dragging and dropping referred to the 'move' effect, not copy, so those would need to be changed too (I think maybe in a couple of places).

I also moved your scripts to below your HTML code, because otherwise they won't be able to pick up any elements that hadn't already loaded.

Lastly, the thing you had down the bottom to check for a particular class and alert, wouldn't work, since it'd run when the script first loads/executes. Instead, you should just add something to the drop function, since that fires when something is dropped on the dropzone. I've changed your red background color thing to fire on drop and change the background color of the dropzone div.

Here's the final code I had for your HTML file:

<!doctype html>
<html>
<head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="/Users/internee/Documents/josh/table.css">
        <title>table test</title>
    </head>

    <body>
        <table id="table1">
            <tr>
                <td>
                    <table id="table2">
                        <tr class="one">
                            <td id="img1"><img id="drag1" class="child" src="/Users/internee/Documents/josh/blank.png" draggable="true"
                            ondragstart="drag(event)" width="336" height="69"></td>

                        </tr>
                        <tr class="one">
                            <td id="img2"><img id="drag2" class="child" src="/Users/internee/Documents/josh/cat6.png" draggable="true"
                            ondragstart="drag(event)" width="336" height="69"></td>

                        </tr>
                        <tr class="one">
                            <td id="img3"><img id="drag3" class="child" src="/Users/internee/Documents/josh/usb25.png" draggable="true"
                            ondragstart="drag(event)" width="336" height="69"></td>

                        </tr>
                    </table>
                </td>
                <td>
                    <table id="table3">
                        <tr class="one">
                            <td img="img4"><img id="drag4" class="child" src="/Users/internee/Documents/josh/hdmi.png" draggable="true"
                            ondragstart="drag(event)" width="336" height="69"></td>     

                        </tr>
                        <tr class="one">
                            <td id="img5"><img id="drag5" class="child" src="/Users/internee/Documents/josh/aux.png" draggable="true"
                            ondragstart="drag(event)" width="336" height="69"></td>

                        </tr>
                        <tr class="one">
                            <td id="img6"><img id="drag6" class="child" src="/Users/internee/Documents/josh/usb50.jpg" draggable="true"
                            ondragstart="drag(event)" width="336" height="69"></td>
                        </tr>
                    </table>
                </td>
                <td>
                    <div id="dz" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                </td>
            </tr>

        </table>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
                <script>

            function allowDrop(ev) {
                ev.preventDefault();
                ev.dataTransfer.dropEffect = "copy";
            }

            function drag(ev) {
                ev.dataTransfer.setData("text/plain", ev.target.id);
                console.log(ev.target.id);
                // ev.dropEffect = "move";
                ev.dataTransfer.effectAllowed = "copy";
            }

            function drop(ev) {
                ev.preventDefault();
                var target = ev.target;
                var data = ev.dataTransfer.getData("text/plain");
                ev.target.appendChild(document.getElementById(data).cloneNode());
                console.log( ev.target.id + ' dropped' );
                // debugger;
                console.log(target);
                hasImg(target);
            }

            var $TD = $( "td" );
            $TD.each(function(i) {
                if ($(this).find( "img" ).length > 0) {
                    console.log( "image" );
                } else {
                    console.log( "no image" );
                }
            });

            $.fn.image = function(src, f) {
                return this.each(function() {
                    var i = new Image();
                    i.src = src;
                    i.onload = f;
                    this.appendChild(i);
                });   
            }

            // var checker = function(inf){
            //     if ($(this)).find( "img" ) {
            //         var $store = document.getElementById( inf );        // get child element, check for id, if there and then return and store for main comparison
            //         var $item = document.getElementById( "dz" ) 
            //         if $item.childNode.is("#img1"){
            //             console.log("success")

            //         }else{
            //             console.log("nearly");
            //         }

            //     }

            var mainDrop = document.getElementById( "dz" )
            function hasImg(el) {
              if ($(el).children('img').length > 0) {
                console.log($(el));
                $(el).css( "background-color", "red" );
              }
            }
        </script>
    </body>
</html>
Josh Keenan
Josh Keenan
20,315 Points
Josh Keenan
Josh Keenan
20,315 Points

Apologies for the slow reply and poor formatting, will fix in half an hour:

html:

<!doctype html>
<html>
<head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="/Users/internee/Documents/josh/table.css">
        <title>table test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script>

            function allowDrop(ev) {
                ev.preventDefault();
            }

            function drag(ev) {
                ev.dataTransfer.setData("text", ev.target.id);
                console.log(ev.target.id);
                ev.dropEffect = "move";
            }

            function drop(ev) {
                ev.preventDefault();
                var data = ev.dataTransfer.getData("text");
                ev.target.appendChild(document.getElementById(data));
                console.log( ev.target.id + ' dropped' )
            }

            var $TD = $( "td" );
            $TD.each(function(i) {
                if ($(this).find( "img" ).length > 0) {
                    console.log( "image" );
                } else {
                    console.log( "no image" );
                }
            });

            $.fn.image = function(src, f) {
                return this.each(function() {
                    var i = new Image();
                    i.src = src;
                    i.onload = f;
                    this.appendChild(i);
                });   
            }

            // var checker = function(inf){
            //     if ($(this)).find( "img" ) {
            //         var $store = document.getElementByid( inf );        // get child element, check for id, if there and then return and store for main comparison
            //         var $item = document.getElementByid( "dz" ) 
            //         if $item.childNode.is("#img1"){
            //             console.log("success")

            //         }else{
            //             console.log("nearly");
            //         }

            //     }

            var mainDrop = document.getElementByid( "dz" )

            if (mainDrop.childNode.class == "drag1") {

                alert("img1 is in div");

            }


            $( "td" ).has( "img" ).css( "background-color", "red" );
        </script>
    </head>

    <body>
        <table id="table1">
            <tr>
                <td>
                    <table id="table2">
                        <tr class="one">
                            <td id="img1"><img id="drag1" class="child" src="/Users/internee/Documents/josh/blank.png" draggable="true"
                            ondragstart="drag(event)" width="336" height="69"></td>

                        </tr>
                        <tr class="one">
                            <td id="img2"><img id="drag2" class="child" src="/Users/internee/Documents/josh/cat6.png" draggable="true"
                            ondragstart="drag(event)" width="336" height="69"></td>

                        </tr>
                        <tr class="one">
                            <td id="img3"><img id="drag3" class="child" src="/Users/internee/Documents/josh/usb25.png" draggable="true"
                            ondragstart="drag(event)" width="336" height="69"></td>

                        </tr>
                    </table>
                </td>
                <td>
                    <table id="table3">
                        <tr class="one">
                            <td img="img4"><img id="drag4" class="child" src="/Users/internee/Documents/josh/hdmi.png" draggable="true"
                            ondragstart="drag(event)" width="336" height="69"></td>     

                        </tr>
                        <tr class="one">
                            <td id="img5"><img id="drag5" class="child" src="/Users/internee/Documents/josh/aux.png" draggable="true"
                            ondragstart="drag(event)" width="336" height="69"></td>

                        </tr>
                        <tr class="one">
                            <td id="img6"><img id="drag6" class="child" src="/Users/internee/Documents/josh/usb50.jpg" draggable="true"
                            ondragstart="drag(event)" width="336" height="69"></td>
                        </tr>
                    </table>
                </td>
                <td>
                    <div id="dz" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                </td>
            </tr>

        </table>
    </body>
</html>

END

CSS:

@charset "UTF-8";
/* CSS Document */

@charset "UTF-8";
/* CSS Document */

* {
    margin: auto;
}

body {
    color: #878787;
    margin: auto;
    font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div {
  padding: 10px;
  margin: auto;
  border: solid black 2px;
  min-height: 500px;
  min-width: 250px;
}

table {
    padding: 3%;
    margin: auto;
    border: solid black 1px;

}

td {
    padding: 15px;
    margin: auto;
    border: blue 2px dotted;
    text-align: center;
    width: 22.5%;
}

tr {
    padding: 10px;
    margin: auto;
    border: solid black 2px;
  min-height: 100px;

}

td img {
    border: solid black 1px;
}

img {
  border-radius: 25px;
  border: 1px solid #73AD21;
  padding: 20px; 
  width: 200px;
  height: 100px; 
}

#dz {
    width: 35%;
    border: solid 1px black;
    height: 80%;
}

.wrap {
  width: 600px;
  height: 600px;
  background: none;
  font-size: 0;
  border-top: 200px;
}

.column {
  display: inline-block;
  width: 200px;
  height: 600px;
  background: none;
  font-size: 16px;
}

.row {
  display: block;
  width: 200px;
  height: 200px;
  top: 20px;
}

#table2 {
  padding: 1%;
  min-height: 500px;
  min-width: 250px;

}

#table3 {
  padding: 1%;
  min-height: 500px;
  min-width: 250px;
}


.one {
  min-height: 100px;
  min-width: 200px;
  height: 25%;
  min-width: 225px;
  width: 50%;
}

/*
.two {
  min-height: 100px;
  min-width: 200px;
  height: 75%;
  min-width: 225px;
  width: 50%;
}

/*
#two {
  background: blue;
  border: solid black 1px;
  padding: 10px;
}

#three {
  background: violet;
  border: solid black 1px;
  padding: 10px;
}

#four {
  background: orange;
  border: solid black 1px;
  padding: 10px;
}

#five {
  background: brown;
  border: solid black 1px;
  padding: 10px;
}

#six {
  background: yellow;
  border: solid black 1px;
  padding: 10px;
}

#seven {
  display: block;
  border: solid black 1px;
  position: relative;
  top: -450px;
  width: 200px;
  height: 600px;
  background: green;
  padding: 10px;
}
*/