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 [SOLVED]

Okay so I'm working on developing an app where you can drag one of six images into a box. My problem is that if I drag an image that isn't the first one that appears in my html, the first image in my html is the one that appears in the box where you can drop stuff.

I have no idea why as of yet, any help would be appreciated, I can't find backticks on the keyboard I'm using so I apologise for this horrible formatting.

html file

<!doctype html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/Users/internee/Documents/josh/table.css"> <title>table test</title> <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>
    <table>
        <tr>
            <td><img id="drag1" class="child" src="/Users/internee/Documents/josh/blank.png" draggable="true"
            ondragstart="drag(event)" width="336" height="69"></td>
            <td ondrop="drop(event)" ondragover="allowDrop(event)">Drop Zone</td>
            <td><img id="drag1" class="child" src="/Users/internee/Documents/josh/usb25.png" draggable="true"
            ondragstart="drag(event)" width="336" height="69"></td>
        </tr>
        <tr>
            <td><img id="drag1" class="child" src="/Users/internee/Documents/josh/cat6.png" draggable="true"
            ondragstart="drag(event)" width="336" height="69"></td>
            <td ondrop="drop(event)" ondragover="allowDrop(event)">test2</td>
            <td><img id="drag1" class="child" src="/Users/internee/Documents/josh/hdmi.png" draggable="true"
            ondragstart="drag(event)" width="336" height="69"></td>
        </tr>
        <tr>
            <td><img id="drag1" class="child" src="/Users/internee/Documents/josh/aux.png" draggable="true"
            ondragstart="drag(event)" width="336" height="69"></td>
            <td ondrop="drop(event)" ondragover="allowDrop(event)">test2</td>
            <td><img id="drag1" class="child" src="/Users/internee/Documents/josh/usb50.jpg" draggable="true"
            ondragstart="drag(event)" width="336" height="69"></td>
        </tr>
    </table>
</body>

</html>

END

CSS file

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

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

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

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

}

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

tr { padding: 1%; margin: auto; border: solid black 2px; }

END

1 Answer

Josh Keenan
Josh Keenan
20,315 Points

Id attribute was the problem, all images had the id of drag1 so obviously the first instance available was the one always moved.