D'n'd File Linking, Tests - Blowsie

Drag n Drop Linking

by blowsie

HTML

<script src="http://www.abuilding.co.uk/Scripts/jquery.livequery.js"></script>
<script src="http://www.abuilding.co.uk/Scripts/jquery.edocuments.js"></script>
<div style="width:48%; float:left;" >
    <table class="list" style="background:lightblue">
        <thead>
            <tr>
                <th>X</th>
                <th>Ref</th>
                <th>Desc</th>
                <th>File</th>
                <th class="unlink">&nbsp;</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>X</td>
                <td>001</td>
                <td>Drawing 1</td>
                <td>&nbsp;</td>
                <td class="link">&nbsp;</td>
            </tr>
            <tr>
                <td>X</td>
                <td>002</td>
                <td>Drawing 2</td>
                <td>&nbsp;</td>
                <td class="link">&nbsp;</td>
            </tr>
            <tr>
                <td>X</td>
                <td>003</td>
                <td>Drawing 3</td>
                <td>&nbsp;</td>
                <td class="link">&nbsp;</td>
            </tr>
        </tbody>
    </table>  
    <a href="#" class="addrow">Add Row</a>
    <table class="list" style="background:lightblue">
        <thead>
            <tr>
                <th>X</th>
                <th>Ref</th>
                <th>Desc</th>
                <th>File</th>
                <th class="unlink">&nbsp;</td>
                </tr>
                </thead>
                    <tbody>
                        <tr>
                            <td>X</td>
                            <td>001</td>
                            <td>Drawing 1</td>
                            <td>&nbsp;</td>
                            <td class="link">&nbsp;</td>
                        </tr>
                        <tr>
                            <td>X</td>
                            <td>002</td>
                            <td>Drawing 2</td>
                            <td>&nbsp;</td>
   ...

CSS

table {margin:2px; width:100%}
table td, table th {border:1px solid #666}
.yellow {background:yellow}
.green {background:green}
#files {width:48%; float:left; margin-left:10px}
#files a {color:blue}
#files a.linked {color:magenta;}
#files .odd {background:#EDE7B1}
.list a {color:blue !important}
.list .odd {background:#D0E8EF}
.link {background: url('http://www.abuilding.co.uk/icons/link.png') no-repeat 50% 50%; width:20px; cursor:pointer}
.unlink {background: url('http://www.abuilding.co.uk/icons/link_break.png') no-repeat 50% 50%; width:20px; cursor:pointer}
.dropped, .dropped a {color:green !important}

JavaScript

var drag = "#files tbody tr td a";
var drop = ".list tbody tr td:nth-child(4)";
var sort = ".list tbody";
$(sort).sortable({
    axis: 'y',
    helper: function(e, tr) {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function(index) {
            $(this).width($originals.eq(index).width());
        });
        return $helper;
    },
    start: function(event, ui) {
        $(ui.helper).animate({
            backgroundColor: "white"
        }, 500);
    },
    stop: function(event, ui) {
        $(ui.item).toggleClass('dropped', 300).doTimeout(500, function() {
            $(ui.item).toggleClass('dropped', 300);
        });
    }
});
var dropoptions = {
    accept: drag,
    activeClass: 'yellow',
    hoverClass: 'green',
    drop: function(ev, ui) {
        $(this).empty().next().addClass('unlink');
        $(ui.draggable).addClass('linked').clone().prependTo($(this));
    }
};
$(drop).droppable(dropoptions);
$(drag).draggable({
    revert: 'invalid',
    helper: 'clone'
});
$(".list").delegate('.unlink', 'click', function() { // Unlink Function
    if ($(this).is("th")) { // Unlink All
        $(this).parents('.list').find('tbody .unlink').removeClass("unlink");
        $(this).parents('.list').find('a').each(function() {
            var fileid = $(this).data("g-file");
            $(this).remove();
            if ($('.list').find('a[data-g-file=' + fileid + ']').length === 0) {
                $('#files').find('a[data-g-file=' + fileid + ']').removeClass('linked');
            }
        });
    }
    else { // Unlink Row
        var file = $(this).prev().children();
        var fileid = file.data("g-file");
        $(this).removeClass("unlink");
        file.remove();
        if ($('.list').find('a[data-g-file=' + fileid + ']').length === 0) {
            $('#files').find('a[data-g-file=' + fileid + ']').removeClass('linked');
        }
    }
}).delegate('tr :nth-child(1)', 'click', function() { //...