Drag & Drop Discs

by bizamajig

HTML

<table>
        <thead>
            <tr>
                <td colspan="4" style="color: #660000;">
                    The purpose here is to be able to:<br />
                    <ul>
                        <li>Drag cloned-copies of 'break-point' placeholders into the 'report rows' collection.</li>
                        <li>Drag a single entire 'report group' (not a clone) into the 'report rows' collection.</li>
                        <li>Once dragged, the user can re-sort 'report rows' to their hearts content.</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                </td>
                <td>
                    Report Rows
                </td>
                <td>
                    Report Groupings
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td valign="top">
                    <div id="divBreakPoint" class="item breakPoint placeHolder">
                        <input type="hidden" name="ctl00$ContentPlaceHolder1$hidReportKey" id="ctl00_ContentPlaceHolder1_hidReportKey" />
                        <input type="hidden" name="ctl00$ContentPlaceHolder1$hidProjectKey" id="ctl00_ContentPlaceHolder1_hidProjectKey" />
                        <input type="hidden" name="ctl00$ContentPlaceHolder1$hidAsOf" id="ctl00_ContentPlaceHolder1_hidAsOf" />
                        <span id="ctl00_ContentPlaceHolder1_lblName">BreakPoint</span>
                    </div>
                </td>
                <td>
                </td>
                <td valign="top">
                    <div id="divReportRows">
                            <div class="item reportRow reportRow">
                                <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl00$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl00_hidReportKey" value="306" />
                               ...

CSS

.item
    {
        background-color: #DDDDDD;
        border: solid 1px #777777;
        margin: 2px;
        width: 300px;
    }
    .breakPoint
    {
        background-color: #999966;
    }
    .placeHolder
    {
    }
    .reportRow
    {
    }
    .reportGroup
    {
    }

JavaScript

$("#divReportRows").sortable();

$("#divReportRows").disableSelection();

        $("#divReportRows").droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: '.breakPoint, .reportGroup',
            drop: function(event, ui) {

                var item = $(ui.draggable);

                if (item.hasClass('reportRow'))
                    return;
                        
                        if(item.hasClass('breakPoint'))
                            item.removeAttr('id');

                if (item.hasClass('placeHolder'))
                    item.removeClass("placeHolder");
              
                
                if (item.hasClass('reportGroup'))
                    item.removeClass("reportGroup");
                                      
              item.addClass("reportRow");
              $(this).append(item);  
            }
        });

        $("#divBreakPoint").draggable({
            connectToSortable: '#divReportRows',
            helper: 'clone'
        });

        $("#divReportGrouping div.item").draggable({
            revert: 'invalid',
            connectToSortable: '#divReportRows',
            helper: 'original',
            stop: function(event, ui){
                    ui.helper.css('position','relative');   
            }
        });