Question

我试图将tr拖到另一个table。

控制台正在投掷Uncaught ReferenceError: allowDrop is not defined。我不确定为什么会这样。

<div class="data">
    <table>
        <tbody ondrop="drop(event)" ondragover="allowDrop(event)">
            <tr id="1" draggable="true" ondragstart="drag(event)">
                <td>One</td>
            </tr>
            <tr id="2" draggable="true" ondragstart="drag(event)">
                <td>Two</td>
            </tr>
            <tr id="3" draggable="true" ondragstart="drag(event)">
                <td>Three</td>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody ondrop="drop(event)" ondragover="allowDrop(event)">
            <tr id="4" draggable="true" ondragstart="drag(event)">
                <td>Four</td>
            </tr>
            <tr id="5" draggable="true" ondragstart="drag(event)">
                <td>Five</td>
            </tr>
            <tr id="6" draggable="true" ondragstart="drag(event)">
                <td>Six</td>
            </tr>
        </tbody>
    </table>
</div>


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));
}

Answer 1

https://developer.mozilla.org/en-US/docs/Web/Events/dragstart

document.allowDrop = function(ev) {
    ev.preventDefault();
}

document.drag = function(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

document.drop = function(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

Answer 2

ondragover="allowDrop(event)"在呈现allowDrop时立即调用<table>函数，但在allowDrop之后才定义<table>。

需要更改为ondragover="allowDrop"。

Answer 3

我发现了您的代码不起作用的一个原因。您的id属性不应以数字开头。

ID和NAME令牌必须以字母（[A-Za-z]）开头，后面可以跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“ _“），冒号（”：“）和句号（”。“）。

http://www.w3.org/TR/html4/types.html

Answer 4

JSFiddle不会在全局命名空间中运行您的javascript，因此您的函数声明不会公开。你可以在最后添加：

window.allowDrop = allowDrop;
window.drag = drag;
window.drop = drop;

html5：将tr拖到另一个表中

4 个答案: