Hello, i am new to javascript and trying use drag and drop but seeing the following error :
NS_ERROR_INVALID_POINTER: Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.appendChild]
http://localhost:5723/dominoes/index.php
Line 26
plus, i can put up the image but it still has a copy left behind and wont let me drop it..
[Break On This Error]
ev.target.appendChild(document.getElementById(data));
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>
This the htmlt output
<!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: black;" class="bones_Play2Right">42</div><div style="background-color: black;" class="bones_Play2Right">44</div><div style="background-color: black;" class="bones_Play2Right">32</div><div style="background-color: black;" class="bones_Play2Right">65</div><div style="background-color: black;" class="bones_Play2Right">55</div><div style="background-color: black;" class="bones_Play2Right">0</div><div style="background-color: black;" class="bones_Play2Right">50</div></div><div id="Play2Top" ><div style="background-color: blue;" class="bones_Play2Top">53</div><div style="background-color: blue;" class="bones_Play2Top">51</div><div style="background-color: blue;" class="bones_Play2Top">61</div><div style="background-color: blue;" class="bones_Play2Top">11</div><div style="background-color: blue;" class="bones_Play2Top">60</div><div style="background-color: blue;" class="bones_Play2Top">62</div><div style="background-color: blue;" class="bones_Play2Top">31</div></div><div id="Play2Left" ><div style="background-color: red;" class="bones_Play2Left">43</div><div style="background-color: red;" class="bones_Play2Left">33</div><div style="background-color: red;" class="bones_Play2Left">30</div><div style="background-color: red;" class="bones_Play2Left">41</div><div style="background-color: red;" class="bones_Play2Left">22</div><div style="background-color: red;" class="bones_Play2Left">64</div><div style="background-color: red;" class="bones_Play2Left">63</div></div><div id="Play2Active" ><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/40.png" alt="40" ><img draggable="true" ondragstart="drag(event)" class="bones_Play2Active" src="/dominoes/css/images/10.png" alt="10" ><img draggable="true" ondragstart="drag(event)" class="bones_Play2Active" src="/dominoes/css/images/52.png" alt="52" ><img draggable="true" ondragstart="drag(event)" class="bones_Play2Active" src="/dominoes/css/images/20.png" alt="20" ><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" ></div></div></div>
</body>
</html>
