RubaXa/Sortable

Trying to show the problem described in issue #591

by knospe

HTML

<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
<table id="shopping-cart-table" class="cart-table data-table">
            <colgroup>
                <col width="1">
                <col width="1">
                <col width="1">
                <col width="1">
                <col width="1">
                <col width="1">
            </colgroup>
            <thead>
                <tr class="first last">
                    <th rowspan="1"><span class="nobr">Artikel</span></th>
                    <th rowspan="1">&nbsp;</th>
                    <th class="a-center cart-price-head" colspan="1"><span class="nobr">Preis</span></th>
                    <th class="a-center cart-price-head"><span class="nobr">Pt.</span></th>
                    <th rowspan="1" class="a-center">Menge</th>
                    <th class="a-center cart-total-head" colspan="1">Zwischensumme</th>
                    <th class="a-center" rowspan="1">&nbsp;</th>
                </tr>
            </thead>
            <tfoot>
                <tr class="first last">
                    <td colspan="50" class="a-right cart-footer-actions last">

                        <!-- Make this button the first responder rather than empty cart -->
                        <span>Warenkorb aktualisieren</span>
                    </td>
                </tr>
            </tfoot>


            <!-- Loop trough the cart items and divide them in the right cart -->
            <!-- Bonuspunkte-cart -->
            <tbody id="pointsCart" class="useSorting">
                <tr class="first odd">
                    <td colspan="7" class="cartTitleDivider last">
                        <h4>Bonuspunkte Warenkorb</h4>
                    </td>
                </tr>
                <tr class="item cart-product even">
                    <td class="product-cart-image">
                        <a href="#" title="Product" class="product-image">
                            <img...

CSS

.product-cart-image img {
    width: 40px;
    height: auto;
}

h2.product-name {
    font-size: 12px;
}

JavaScript

var $j = jQuery.noConflict();

	var tbodyPoints = $j('#pointsCart');
    var tbodyEur    = $j('#eurCart');

    Sortable.create(pointsCart, {
        group: "points_cart",
        sort: false,
        filter: ".ignore-elements",  // Selectors that do not lead to dragging (String or Function)
        draggable: ".item",  // Specifies which items inside the element should be sortable
        ghostClass: "sortable-ghost",  // Class name for the drop placeholder
        chosenClass: "sortable-chosen",  // Class name for the chosen item

        // dragging ended
        onSort: function (/**Event*/evt) {
            evt.oldIndex;  // element's old index within parent
            evt.newIndex;  // element's new index within parent

            //checkSortableCart(tbodyPoints);
        }
    });

    Sortable.create(eurCart, {
        group: "points_cart",
        sort: false,
        filter: ".ignore-elements",  // Selectors that do not lead to dragging (String or Function)
        draggable: ".item",  // Specifies which items inside the element should be sortable
        ghostClass: "sortable-ghost",  // Class name for the drop placeholder
        chosenClass: "sortable-chosen",  // Class name for the chosen item

        // dragging ended
        onSort: function (/**Event*/evt) {
            evt.oldIndex;  // element's old index within parent
            evt.newIndex;  // element's new index within parent

            //checkSortableCart(tbodyEur);
        }
    });


	/*
    	Adds a placeholder to the sorting list.
    */
    function checkSortableCart(cartEl) {
        // Check the number of elements in the listing
        var cartElements = cartEl.find('tr');
        if(cartElements.length == 1) { // first <tr> element is tbody title
            var tbodyTitle = cartEl.html();

            if(cartEl.attr('id') == 'pointsCart') {
                cartEl.html(tbodyTitle + '<tr class="no-sort-items item"><td colspan="7">No items in sort Points cart -...