JQuery Drag Column to a new Table and add to Row at specific position

Question

I got multiple tables and I want to be able to drag my columns from one table to another. The column should be added to the current position's row. Now I got this to work like this:

<script type="text/javascript">//<![CDATA[ 
    $(window).load(function () {
        $(init);
        function init() {
            $("td").draggable({
                start: handleDragStart,
                cursor: 'move',
                revert: "invalid",
            });
            $("tr").droppable({
                drop: handleDropEvent,
                tolerance: "touch",
            });
        }
        function handleDragStart(event, ui) {
            $(this).css('z-index', 9999);
        }
        function handleDropEvent(event, ui) {
            $(this).append(ui.draggable);
            ui.draggable.position({ of: $(this), my: 'right top', at: 'right top' });
            ui.draggable.css('z-index', 0);
        }
    });//]]>  

</script>

This works but it will always add the column at the end of the row (because of the top right position), now what I really want is that if there are 2 columns present in the droppable table that I can also place my dragging column in between those 2 columns.

Any ideas how I can manage that?

Answer 1

I solved this by using "before" and "after" functions and appending pure html code.

something like this:

$(ctrl).parent().before('<div class="content"><div class="cellBefore"></div><div class="cell"><div class="handleCell"></div>' + ui.draggable[0].innerHTML + '</div><div class="cellAfter"></div></div>');

I'm wondering why i'm not getting any answers tho....