<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div class="row" style="background-color: greenyellow">
    <div class="columns medium-6" style="background-color: #a8e4ff">
        <h3>Adatbázisban létező tulajdonságok</h2>
        <ul id="sortable1" class="sortable_list connectedSortable">
            {foreach $attributes as $attr}
                <li class="ui-state-default">{$attr.name}</li>
            {/foreach}
            </li>
        </ul>
    </div>
    <div class="columns medium-6" style="background-color: #FFE45C">
        <h3>Termék tulajdonságok</h2>
        <ul id="sortable2" class="sortable_list connectedSortable" data-empty-message="You have no unread messages">
            {foreach $productAttributesss as $prodAttr}
                <li class="ui-state-highlight"><span>{$prodAttr.name} - {$prodAttr.priority}</span></li>
            {/foreach}
        </ul>
    </div>
</div>

<style>
    #sortable2 {
        border: 1px solid #eee;
        min-height: 40px;
        padding-bottom: 5px;
    }

    #sortable1 li, #sortable2 li {
        margin: 0 5px 5px 5px;
        padding: 5px;
    }
</style>

<script>
$(function() {
    $( ".sortable_list" ).sortable({
        connectWith: ".connectedSortable"
    }).disableSelection();
});

</script>
<script>
$(function() {
    $( ".sortable_list" ).sortable({
        connectWith: ".connectedSortable",
        opacity: 0.5,
        cursor: 'move',
        tolerance: 'pointer',
        revert: false,
        items:'li',
        placeholder: 'state',
        forcePlaceholderSize: true,
        data: $(this).sortable("serialize"),
        update: function(e, ui){
            newOrder = $(this).sortable("serialize");
            console.log(newOrder);
            $.ajax({
                    url: "/admin/dashboard/save_order",
                    type: "POST",
                    data: newOrder,
                    // complete: function(),
                    success: function(feedback){
                         $("#test").html(feedback);
                         //$.jGrowl(feedback, { theme: 'success' });
                    }
                    });
                }

        });
});
</script>