文章/答案/技术大牛

发布

社区首页 >问答首页 >javascript拖放不起作用

问javascript拖放不起作用
EN

Stack Overflow用户

提问于 2013-02-09 15:09:11

回答 1查看 3.2K关注 0票数 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>

javascript

html

回答 1

Stack Overflow用户

发布于 2013-02-09 21:46:40

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14789447

复制

相似问题

问javascript拖放不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript拖放不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript拖放不起作用
EN