Dragging and dropping

Question

I want to drag and drop the table contents into a text-box.

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

When I'm dragging and dropping the car type, null value is being dropped instead of a car value.I don't know what I am doing wrong. Please explain

Answer 1

Working Fiddle

Your code work after some changes, you have this inside dragSource.ondragstart function that return all table instead of dropped td what means when you try getAttribute("carValue") that generate an error because table don't have a carValue attribut, so use event.target that return target or dropped td in our case instead of this .

Also you have to call your function registerDragDrop() after definition.

JS changes

Replace :

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

By :

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

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

Hope this help.