javascript drag and drop not working

▲
0
▼

I am trying to get the images on the page to be dragged and dropped in the center of the page. I can see the image being dragged, but a copy is still left behind. when i drop it it goes back to its original position.

Can anyone tell me what i am doing wrong and also why i am seeing this error:

NS_ERROR_INVALID_POINTER: Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.appendChild]

ev.target.appendChild(document.getElementById(data))

this is the output of the code:

<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title></title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <link rel="stylesheet" href="../dominoes/css/dominoes.css" type="text/css" />
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <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="board">
    <div id='playArea' ondrop='drop(event)' ondragover='allowDrop(event)'>
        <div id="Play2Right">
            <div style="background-color: red;" class="bones_Play2Right">51</div>
            <div style="background-color: red;" class="bones_Play2Right">61</div>
            <div style="background-color: red;" class="bones_Play2Right">65</div>
            <div style="background-color: red;" class="bones_Play2Right">62</div>
            <div style="background-color: red;" class="bones_Play2Right">44</div>
            <div style="background-color: red;" class="bones_Play2Right">33</div>
            <div style="background-color: red;" class="bones_Play2Right">20</div>
        </div>
        <div id="Play2Top">
            <div style="background-color: green;" class="bones_Play2Top">32</div>
            <div style="background-color: green;" class="bones_Play2Top">50</div>
            <div style="background-color: green;" class="bones_Play2Top">42</div>
            <div style="background-color: green;" class="bones_Play2Top">31</div>
            <div style="background-color: green;" class="bones_Play2Top">53</div>
            <div style="background-color: green;" class="bones_Play2Top">52</div>
            <div style="background-color: green;" class="bones_Play2Top">41</div>
        </div>
        <div id="Play2Left">
            <div style="background-color: black;" class="bones_Play2Left">22</div>
            <div style="background-color: black;" class="bones_Play2Left">10</div>
            <div style="background-color: black;" class="bones_Play2Left">0</div>
            <div style="background-color: black;" class="bones_Play2Left">43</div>
            <div style="background-color: black;" class="bones_Play2Left">30</div>
            <div style="background-color: black;" class="bones_Play2Left">55</div>
            <div style="background-color: black;" class="bones_Play2Left">63</div>
        </div>
        <div id="Play2Active">
            <img draggable="true" ondragstart="drag(event)" class="bones_Play2Active"
            src="/dominoes/css/images/60.png" alt="60">
            <img draggable="true" ondragstart="drag(event)" class="bones_Play2Active"
            src="/dominoes/css/images/66.png" alt="66">
            <img draggable="true" ondragstart="drag(event)" class="bones_Play2Active"
            src="/dominoes/css/images/54.png" alt="54">
            <img draggable="true" ondragstart="drag(event)" class="bones_Play2Active"
            src="/dominoes/css/images/21.png" alt="21">
            <img draggable="true" ondragstart="drag(event)" class="bones_Play2Active"
            src="/dominoes/css/images/11.png" alt="11">
            <img draggable="true" ondragstart="drag(event)" class="bones_Play2Active"
            src="/dominoes/css/images/64.png" alt="64">
            <img draggable="true" ondragstart="drag(event)" class="bones_Play2Active"
            src="/dominoes/css/images/40.png" alt="40">
        </div>
    </div>
</div>

  </body>
</html>
javascript
html5
asked on Stack Overflow Feb 9, 2013 by user1289642 • edited Feb 9, 2013 by Felix Kling

1 Answer

▲
1
▼

You're setting the Text data to be the id of the element dragged:

ev.dataTransfer.setData("Text",ev.target.id);

But your draggable elements do not have an id:

<img draggable="true" ondragstart="drag(event)" class="bones_Play2Active"
        src="/dominoes/css/images/60.png" alt="60">

Therefore this code:

document.getElementById(data)

Is doing the same thing as this:

document.getElementById('')

Which won't return a valid element, therefore your call to ev.target.appendChild is going to fail because no element is being passed as a parameter.

answered on Stack Overflow Feb 9, 2013 by robertc

User contributions licensed under CC BY-SA 3.0