拖放

Question

我想將表內容拖放到文本框中。

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

當我拖放汽車類型時，將丟棄空值而不是汽車值。我不知道我在做什么錯。 請解釋

Answer 1

工作小提琴

您的代碼經過一些更改后可以工作，在dragSource.ondragstart函數中包含this函數， this函數返回所有表而不是刪除td這意味着當您嘗試getAttribute("carValue")會生成錯誤，因為表沒有carValue屬性，因此請使用event.target返回目標或在我們的情況下而不是this丟棄td。

另外，您必須在定義后調用函數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;
    };
};

希望能有所幫助。