jQuery Forum

Hello.

We’re trying to develop a client-side/browser view for our site using jQuery and Twitter Bootstrap.  Using Twitter Bootstrap’s responsive design, fluid grid system, we have a page that has 3 rows.  The first row has 3 columns (i.e., 3 span4 divs).  The second row has 4 columns (i.e., 4 span3 divs).  And, the last row has 2 columns (i.e., 2 span6 divs).  Here’s a snippet of the html:

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span4 sortable">
                <div>
                    content1a
                </div>
            </div>
            <div class="span4 sortable">
                <div>
                    content2a
                </div>
            </div>
            <div class="span4 sortable">
                <div>
                    content3a
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span3 sortable">
                <div>
                    content1b
                </div>
            </div>
            <div class="span3 sortable">
                <div>
                    content2b
                </div>
            </div>

            <div class="span3 sortable">
                <div>
                    content3b
                </div>
            </div>

            <div class="span3 sortable">
                <div>
                    content4b
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span6 sortable">
                <div>
                    content1c
                </div>
            </div>

            <div class="span6 sortable">
                <div>
                    content2c
                </div>
            </div>
        </div>
    </div>

Works good.  However, we’re having troubles implementing the next requirement.  We need to be able to drag, drop, and swap the divs.  That is, using jQuery, we need to be able to grab one of the divs with a class=”spanX”, drag it onto one of the other divs with a class=”spanX”, drop it, and have the two divs swap places (positions with the Bootstrap grid system), including swapping, for example, a span3 to a span4 and a span4 to a span3.

We’ve tried many things with jQuery’s draggables, droppables, sortables, etc., and haven’t come up with an adequate solution, so we thought we’d see if we could get some assistance.  Here’s a snippet of our js code:

            sourcePositionLeft = 0,
            sourcePositionTop = 0,
            targetPositionLeft = 0,
            targetPositionTop = 0,
            handlePortletSortable = function () {
                if (!jQuery().draggable) {
                    return;
                }
                if (!jQuery().droppable) {
                    return;
                }

                $(".sortable").draggable({
                    opacity: 0.9,
                    revert: "invalid",
                    revertDuration: 500,
                    zIndex: 5000,
                    start: function (event, ui) {
                        var startPosition = ui.helper.position();
                        sourcePositionLeft = startPosition.left;
                        sourcePositionTop = startPosition.top;
                    }
                });
                $(".sortable").droppable({
                    accept: ".sortable",
                    tolerance: "intersect",
                    drop: function(event, ui) {
                        var dropPosition = $(this).position();
                        targetPositionLeft = dropPosition.left;
                        targetPositionTop = dropPosition.top;
                        swapTiles(ui.draggable, $(this));
                    }
                });

            },
            swapTiles = function(source, target) {
                moveTile(target, sourcePositionLeft, sourcePositionTop);
                moveTile(source, targetPositionLeft, targetPositionTop);
            },
            moveTile = function(tile, positionLeft, positionTop) {
                tile.animate({
                    left: positionLeft,
                    top: positionTop,
                },
                {
                    easing: 'swing',
                    step: function () { return false; },
                    complete: function () { return false; },
                    always: function () { return false; }
                });
            },

This is not working.  The divs aren’t swapping positions and moving to the correct place, and if you drag a span4 div onto a span3 the two divs aren’t swapping classes so that they still conform to Bootstrap.

Any suggestions on how to program and resolve this situation?

Thanks.