better multidrag

crappy broken

by J. Jones

HTML

<table>
    <tr>
        <td class='drag2 a' id='a'>abcdefghijklmnop</td>
    </tr>
    <tr>
        <td class='drag2 b' id='b'>bcdefghijkl</td>
    </tr>
    <tr>
        <td class='drag2 c' id='c'>cdefghijklmnop</td>
    </tr>
    <tr>
        <td class='drag2 d' id='d'>defghijklmnopqrstuv</td>
    </tr>
</table>
<button id='foo' onclick='clearConsole();'>clear console</button>
<div id="console">some text</div>

CSS

.drag3 {
    position: absolute;
    float: left;
    width: 100px;
    height: 100px;
    background: grey;
    margin: 5px;
    z-index: 100
}
.selected {
    background-color: #4af;
}

.b {top: 120px}
.c {left: 120px}
.d {top: 120px;left:120px}

JavaScript

var selectedObjs;

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

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

function dump(object) {
    var output = '';
    for (var property in object) {
        output += property + ': ' + object[property] + '; ';
    }
    return output;
}

function compareObjs(obj1,obj2) {
    var output = '';
    for (var property in obj1) {
        var val1 = obj1[property];
        var val2 = obj2[property];
        if (val1 !== val2 ) {
            output += "objects differ on: " + property + "<br>";
        }
    }
    return output;
}
var draggableOptions = {
    start: function (event, ui) {
        //get all selected...
        if (ui.helper.hasClass('selected')) {
            selectedObjs = $('td.selected');
            log("ui has the selected class");
        } else {
            selectedObjs = $(ui.helper);
            $('td.selected').removeClass('selected');
            log("ui didn't have that");
        }
    }/*,
    drag: function (event, ui) {
        //var objd = dump(selectedObjs);
        //log(objd);
        len = selectedObjs.length;
        for (var i = 0; i < len; i++) {
            var obj = selectedObjs[i];
            var id = $(obj).attr('id');
            var currentLoc = $(obj).position();
            log("currentLoc:" + dump(currentLoc));
            var prevl = $(obj).attr('prevl');
            var prevt = $(obj).attr('prevt');
            log("prevl:" + prevl);
            log("prevt:" + prevt);
            if (!prevl || !prevt) {
                var prevLoc = ui.originalPosition;
                prevl = prevLoc.left;
                prevt = prevLoc.top;
            }
            var nowl = currentLoc.left;
            var nowt = currentLoc.top;
            var oldl = $(obj)[0].style.left; //$(obj).css('left');
            var oldt = $(obj)[0].style.top;//$(obj).css('top');
            oldl =...