javascript拖放不起作用

Question

我正在尝试将页面上的图像拖放到页面中央。 我可以看到图像被拖动，但是仍然保留了副本。 当我放下它时，它会回到其原始位置。

谁能告诉我我在做什么错，以及为什么我看到此错误：

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>

Answer 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的调用将失败，因为没有任何元素作为参数传递。

javascript拖放不起作用

问题描述

1 个解决方案

解决方案1
1 2013-02-09 21:46:40

javascript拖放不起作用

问题描述

1 个解决方案

解决方案1 1 2013-02-09 21:46:40

解决方案1
1 2013-02-09 21:46:40