0

我正在尝试将页面上的图像拖放到页面中心。我可以看到正在拖动的图像，但仍然留下了一个副本。当我放下它时，它会回到原来的位置。

谁能告诉我我做错了什么以及为什么我看到这个错误：

NS_ERROR_INVALID_POINTER：组件返回失败代码：0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.appendChild]

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

这是代码的输出：

<!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>
4

1 回答 1

1

您将Text数据设置为id拖动元素的数据：

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

但是您的可拖动元素没有id：

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

因此这段代码：

document.getElementById(data)

正在做同样的事情：

document.getElementById('')

它不会返回有效元素，因此您的调用ev.target.appendChild将失败，因为没有元素作为参数传递。

于 2013-02-09T21:46:40.077 回答