<script type="text/javascript" src="/js/redips-drag-min.js"></script>
    <script type="text/javascript" src="/js/dragdrop.js"></script>

<asp:UpdatePanel ID="upPage" UpdateMode="Conditional" runat="server">
<ContentTemplate>
    <div>
            <div id="drag">
                <div id="draggableContent">
                    <table id="tblPage" clientidmode="Static" runat="server">
                        <tbody>
                            <tr>
                                <td id="Cell_1_1" clientidmode="Static" runat="server"></td>
                                <td id="Cell_1_2" clientidmode="Static" runat="server"></td>
                                <td id="Cell_1_3" clientidmode="Static" runat="server"></td>
                                <td id="Cell_1_4" clientidmode="Static" runat="server" class="upper_right"></td>
                            </tr>
                            <tr>
                                <td id="Cell_2_1" clientidmode="Static" runat="server"></td>
                                <td id="Cell_2_2" clientidmode="Static" runat="server"></td>
                                <td id="Cell_2_3" clientidmode="Static" runat="server"></td>
                                <td id="Cell_2_4" clientidmode="Static" runat="server"></td>
                            </tr>
                            <tr>
                                <td id="Cell_3_1" clientidmode="Static" runat="server"></td>
                                <td id="Cell_3_2" clientidmode="Static" runat="server"></td>
                                <td id="Cell_3_3" clientidmode="Static" runat="server"></td>
                                <td id="Cell_3_4" clientidmode="Static" runat="server"></td>
                            </tr>
                            <tr>
                                <td id="Cell_4_1" clientidmode="Static" runat="server" class="lower_left"></td>
                                <td id="Cell_4_2" clientidmode="Static" runat="server"></td>
                                <td id="Cell_4_3" clientidmode="Static" runat="server"></td>
                                <td id="Cell_4_4" clientidmode="Static" runat="server"></td>
                            </tr>
                        </tbody>
                    </table>
                </div><!-- right container -->
            </div><!-- drag container -->
        </div>
        <asp:HiddenField ID="dragAction" ClientIDMode="Static" runat="server" />
    </ContentTemplate>
    </asp:UpdatePanel>

// define redips_init variable
var redips_init;
// redips initialization
redips_init = function () {
    // reference to the REDIPS.drag
    var rd = REDIPS.drag;
    // initialization
    rd.init();
    // set hover color
    rd.hover.color_td = '#9BB3DA';
    // single element per cell
    rd.drop_option = 'single';
    // No cloning of objects
    rd.clone_shiftKey = rd.clone_shiftKey_row = false;
    // Handle dropped event
    rd.myhandler_dropped = function () {
        var obj = rd.obj,         // current element
            tac = rd.target_cell; // target cell
        var cmd = document.getElementById('dragAction');
        cmd.value = obj.id + ',' + tac.id; // Set the value to the two id's, comma seperated
        __doPostBack('upPage', ''); // Perform postback
    };
};
// add onload event listener
if (window.addEventListener) {
    window.addEventListener('load', redips_init, false);
}
else if (window.attachEvent) {
    window.attachEvent('onload', redips_init);
}

if (IsPostback)
{
    // Get the right Id's                
    string[] action = dragAction.Value.Split(',');
    int componentId = int.Parse(action[0].Split('_')[1]);
    int locationX, locationY;
    string[] location = action[1].Split('_');
    int.TryParse(location[1], locationX);
    int.TryParse(location[2], locationY);
    
    // TODO: Do what you need to do with this information
}