拖放答案 - 爱码网

【问题标题】：Dragging and dropping拖放
【发布时间】：2015-07-29 09:23:03
【问题描述】：

我想将表格内容拖放到文本框中。

HTML：

<table id = "carTypes">
    <tr><th>Car Type</th><th>Price per mile</th></tr>
    <tr><td carValue = "compact" draggable = "true" >Compact</td><td>$0.99</td></tr>
    <tr><td carValue = "Intermediate" draggable = "true" >Intermediate</td><td>$1.99</td></tr>
    <tr><td carValue = "Luxury" draggable = "true" >Luxury</td><td>$2.99</td></tr>
    <tr><td carValue = "Limo" draggable = "true" >Limo</td><td>$4.99</td></tr>
</table><p>Drag and Drop from the above car-types list to below box: <input type = "text" id = "carTypeChosen" placeholder = 'car type you want' /></p>

JS：

var registerDragDrop = function() {
    var dragSource = document.getElementById("carTypes");

    dragSource.ondragstart = function(event) {
        var dataToCopy = this.getElementsByTagName("td").getAttribute("carValue");
        event.dataTransfer.setData("Text", dataToCopy);
        return true;
    };

    var dropTarget = document.getElementById("carTypeChosen");

    dropTarget.ondrop = function(event) {
        this.value = event.dataTransfer.getData("Text");
        event.preventDefault();
        return false;
    };

    dropTarget.ondragover = function(event) {
        event.preventDefault();
        return false;
    };

    dropTarget.ondragend = function(event) {
        event.preventDefault();
        return false;
    };
};

当我拖放汽车类型时，正在删除空值而不是汽车值。我不知道我做错了什么。请解释

【问题讨论】：

请发布 HTML 代码的其余部分 carTypeChosen 未定义。
当我从汽车类型列表中拖放时，输入字段中放置的是 null 而不是值。
谢谢。让我我做错了什么，应该是什么方法

标签： javascript html drag-and-drop

【解决方案1】：

Working Fiddle

您的代码在经过一些更改后工作，您在 dragSource.ondragstart 函数内有 this，它返回所有表而不是删除 td 当您尝试 getAttribute("carValue") 时会产生错误，因为表没有 @ 987654326@ 属性，所以在我们的例子中使用返回目标或删除 td 的event.target 而不是this。

您还必须在定义后调用您的函数registerDragDrop()。

JS 变化

替换：

this.getElementsByTagName("td").getAttribute("carValue");

作者：

var dataToCopy = event.target.getAttribute("carValue");

完整的 JS：

var registerDragDrop = function() {
    var dragSource = document.getElementById("carTypes");

    dragSource.ondragstart = function(event) {
        var dataToCopy = event.target.getAttribute("carValue");
        event.dataTransfer.setData("Text", dataToCopy);
        return true;
    };

    var dropTarget = document.getElementById("carTypeChosen");

    dropTarget.ondrop = function(event) {
        this.value = event.dataTransfer.getData("Text");
        event.preventDefault();
        return false;
    };

    dropTarget.ondragover = function(event) {
        event.preventDefault();
        return false;
    };

    dropTarget.ondragend = function(event) {
        event.preventDefault();
        return false;
    };
};

希望对您有所帮助。

【讨论】：