multidrag and drop tables working

working

by J. Jones

HTML

<button id='foo' onclick='clearConsole();'>clear console</button>
<div id="console">console log type thing</div>
<p>
    <table class="draggableRows">
        <tr draggable='true'>
            <td>Row 1</td>
        </tr>
        <tr draggable='true'>
            <td>Row 2</td>
        </tr>
        <tr draggable='true'>
            <td>Row 3</td>
        </tr>
    </table>
    <table id='menu_table'>
        <tbody>
            <tr>
                <td class='droppableItem'>accomplished</td>
            </tr>
            <tr>
                <td class='droppableItem'>postponed</td>
            </tr>
            <tr>
                <td class='droppableItem'>deleted</td>
            </tr>
        </tbody>
    </table>

CSS

table {
    width:200px;
    border: brown 1px solid;
    padding:5px;
}
table tr {
    background-color:#FCF6CF;
}
.multiselected {
    background-color:#990099;
}
.selected {
    background-color: #ECB;
}
#menu_table tr {
    width:200px;
    height:100px
}

JavaScript

function clearConsole() {
    $('#console').html(" ");
}

function log(msg) {
    var oldmsg = $('#console').html();
    var newmsg = msg + "<br>" + oldmsg;
    $('#console').html(newmsg);
}

function dump(object) {
    var output = object + "<br>";
    var keys = [];
    for (var key in object) {
        if (key.length > 0) keys.push(key);
    }
    keys.sort();
    for (var i = 0; i < keys.length; i++) {
        var property = keys[i];
        try {
            var val = object[property];
            var vals = '' + val;
            if (val !== null && val !== undefined && vals.length > 0) output += "key:" + property + ': value:' + object[property] + ';<br>';
        } catch (err) { // deprecated members will cause this
            //output += property + ': ' + err.message;
        }
    }
    return output;
}
$('.droppableItem')
    .bind('dragenter dragover', false)
    .bind('drop', function (event) {
    action($(this), event);
});
$("#menu_table tr").droppable({
    drop: function (event, ui) {
        action(ui.helper.children(), event);
        $('.draggableRows').removeClass('.multiselected');
    }
});

$('.draggableRows tr').bind('click', function () {
    $(this).toggleClass("multiselected");
});
$(".draggableRows tr").draggable({
    helper: function () {
        var selected = $('.draggableRows tr.multiselected');
        if (selected.length === 0) {
            selected = $(this).addClass('multiselected');
        }
        var container = $('<div/>').attr('id', 'draggingContainer');
        container.append(selected.clone());//.removeClass("multiselected"));
        return container;
    }
});

function action(children, ev) {
    for (var i = 0; i < children.length; i++) {
        var childi = children[i];
        var t = ev.target;
        var tv2 = $(t).text();
        log($(childi).text() + " made it to " + tv2);
    }
}