draggable td 2

stackoverflow - not working

by J. Jones

HTML

<body>
    <p>Drag the W3Schools image into the rectangle:</p>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>
    <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
    <table>
        <tr >
            <td id="tblrw1" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Some Dummy Text1</td>
        </tr>
        <tr >
            <td id="tblrw2" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Some Dummy Text2</td>
        </tr>
        <tr class=trDrop>
            <td id="tblrw3" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Some Dummy Text3</td>
        </tr>
        <tr >
            <td id="tblrw4" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Some Dummy Text4</td>
        </tr>
    </table>
</body>

</html>

CSS

#div1 {
    width:350px;
    height:70px;
    padding:10px;
    border:1px solid #aaaaaa;
}
td {
    width:500px;
    height:80px;
    margin-bottom:5px;
    padding:8px;
    cursor:default;
}
.trDrop {
    border:4px solid black;
    border-top: 1px solid #FB7A31;
    border-bottom: 1px solid #FB7A31;
}

JavaScript

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

function drag(ev) {
    alert("hey there");
    ev.dataTransfer.setData("Text", ev.target.id);
}

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

function drop(ev) {
    alert("hi");
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    var obj = document.getElementById(data);
    var dropPosX = ev.ClientX;
    var dropPosY = ev.ClientY;
    $("table").find('.trDrop').each(function () {
        alert("hello");
        var tableTr = $(this);
        var posX = tableTr.offset().left;
        var posY = tableTr.offset().top;
        var width = posX + tableTr.width;
        var height = posY + tableTr.height;
        // Now the main trick
        if (dragPosX > posX && dragPosX < width && dragPosY > posY && dragPosY < height) {
            obj.InsertAfter(tableTr);
        }
    })
}