<style>
    .product-imitation {
        height: 120px;
        padding: 0;
        background-size: cover;
        background-position: center;
    }

    .product-imitation div {
        padding: 12px;
    }

    .product-box {
        height: 200px;
        max-height: 400px;
        overflow: hidden;
    }

    .product-desc {
        padding: 12px;
    }

    .product-name {
        font-size: 14px;
        padding-top: 10px;
    }

    .product-price {
        padding: 3px 6px;
        top: -26px;
    }

    .sortable .col {
        border: 1px solid transparent;
    }
</style>
<script>
    // sortable
    var fixHelper = function (e, ui) {
        ui.children().each(function () {
            $(this).width($(this).width());
        });
        return ui;
    };
    $('.sortable').sortable({
//         helper: fixHelper,
        cursor: "move",
        // placeholder: this.lastCol.attr('class') + " bg-gray",
        items: ".col",
        deactivate: function () {
            aux = [];

            console.log(this);
            // get idx an indexes
            $.each($(this).find('.col'), function (index, item) {
                var id = $(item).data('id');
                if (!id) {
                    return;
                }
                $(item).find('.product-position').html(index);
                aux.push({
                    id: id,
                    priority: index,
                });
            });

            // sent the new positions.
            $.ajax({
                url: $(this).data('url'),
                data: {priority: aux},
                method: 'post',
            });
        },
    }).disableSelection();
</script>