html5：将tr拖到另一个表中

I'm trying to drag a tr into another table.

我正在尝试将tr拖到另一个表中。

Console is throwing Uncaught ReferenceError: allowDrop is not defined. I'm unsure why this is.

控制台抛出未捕获的ReferenceError：未定义allowDrop。我不确定为什么会这样。

小提琴：http：//jsfiddle.net/vm24va91/

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

4 个解决方案

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

#2

ondragover="allowDrop(event)" is calling the allowDrop function immediately as the <table> is being rendered, but allowDrop is not defined until after the <table>.

ondragover =“allowDrop（event）”在呈现

时立即调用allowDrop函数，但是直到

之后才定义allowDrop。

It needs changing to ondragover="allowDrop".

它需要改为ondragover =“allowDrop”。

#3

I spotted one reason why your code does not work. Your id attributes should not start with a number.

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

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

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

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

#4

JSFiddle doesn't run your javascript in the global namespace hence your function declarations are not exposed. You could add this at the end:

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

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

#1