Drag and Drop, Grid move and reorder rows

<div class="dropZone">
    <p>drag source</p>
    <div class="ditem">a</div>
    <div class="ditem">b</div>
    <div class="ditem">c</div>
</div>
<br />
<div class="dropZone">
    <p>drop target</p>
</div>

<script>
    $(function () {
        awem.dragReor({
            from: $('.dropZone'),
            sel: '.ditem', // what we can drag
            to: '.dropZone',
            noReorder: true
        });
    });
</script>

<style>
    .dropZone {
        border: 1px solid #9E9E9E;
        border-radius: 2px;
        height: 100px;
        padding: 5px;
    }

        .dropZone.awe-highlight {
            background-color: #ffdfb3 !important;
        }

    .ditem.o-plh {
        filter: opacity(.5);
    }

    .ditem {
        display: inline-block;
        background: gray;
        color: white;
        padding: .5em 2.5em;
        border-radius: 2px;
        cursor: default;
        margin-right: 5px;
    }
</style>

<script>
    $(function () {
        awem.dragReor({ from: $('#board1 .card'), to: '#board1 .card', sel: '.item' });
                
        awem.dragReor({ from: $('#board1'), to: '#board1', sel: '.card'});        
    });
</script>
<div class="board" id="board1">
    <div class="card o-dragCont" data-k="a">
        <div class="item o-dragItm">item 1</div>
        <div class="item o-dragItm">item 2</div>
        <div class="item o-dragItm">item 3</div>
    </div>

    <div class="card o-dragCont" data-k="b">
        <div class="item o-dragItm">item 4</div>
        <div class="item o-dragItm">item 5</div>
    </div>

    <div class="card o-dragCont" data-k="c">
        <div class="item o-dragItm">item 6</div>
        <div class="item o-dragItm">item 7</div>
    </div>
</div>
<br />
<br />
<div id="logci" class="log2"></div>
<style>
    .item.o-plh, .card.o-plh {
        background: #f8da4e !important;
        color: #915608 !important;
    }
</style>

<div class="board" id="dragCountBoard">
    <div class="card source">
        @foreach (var itm in meals)
        {
            <div class="item o-dragItm" data-k="@itm.Id">@itm.Name <span class="val"></span></div>
        }
    </div>

    @foreach (var basket in baskets)
    {
        <div class="card basket o-dragCont" data-k="@basket.Id">
            @foreach (var itm in basket.Items)
            {
                <div class="item o-dragItm" data-k="@itm.Key.Id">
                    @itm.Key.Name <span class="val">@itm.Value</span>
                </div>
            }
        </div>
    }
</div>

<script>
    $(function () {
        awem.dragReor({
            from: $('#dragCountBoard'),
            sel: ".source .item",
            to: '#dragCountBoard .card',
            hide: false, // don't hide dragElm while dragging
            noPlh: true, // no placeholder
            onFakeDrop: function (cx) {
                var dragElm = cx.dropElm;
                var dragElmKey = dragElm.data('k');
                var toCont = cx.cont;

                var existingElm = toCont.find('.item[data-k=' + dragElmKey + ']:not(.o-plh)');

                if (existingElm.length) {
                    incItemCount(existingElm);
                }
                else {
                    var clone = dragElm.clone();
                    toCont.append(clone);
                    incItemCount(clone);
                }
            }
        });

        awem.dragReor({
            from: $('#dragCountBoard'),
            sel: ".basket .item",
            to: '#dragCountBoard .source',

            noHide: true,
            noPlh: true,

            onFakeDrop: function (cx) {
                cx.dropElm.remove();
            }
        });

        function incItemCount(elm) {
            var count = elm.find('.val').html();
            count++;
            elm.find('.val').html(count);
        }
    });
</script>
<style>
    .o-dragForb.card {
        opacity: .5;
        transition: all .2s;
    }

    .o-dragForb .item.o-plh {
        background: #ccc !important;
        color: white !important;
    }

    .cardh {
        padding: 0 1em;
    }
</style>

<div id="gboard">
    @foreach (var basket in baskets)
    {
        <div class="gcard card o-dragItm o-dragCont" data-k="@basket.Id" data-ogroup="@basket.Category">
            <div class="cardh">@(basket.Name ?? basket.Category)</div>
            @foreach (var itm in basket.Items)
            {
                <div class="item o-dragItm" data-k="@itm.Id" data-ogroup="@itm.Category.Name">
                    @itm.Name
                </div>
            }
        </div>
    }
</div>
<script>
    $(function(){
        awem.dragReor({
            from: $('#gboard'),
            sel: ".item",
            to: '#gboard .gcard'
        });
    });
</script>
<style>
    .o-dragForb.card {
        opacity: .5;
        transition: all .2s;
    }

    .o-dragForb .item.o-plh {
        background: #ccc !important;
        color: white !important;
    }

    .cardh {
        padding: 0 1em;
    }
</style>

<script>
    $(function () {
        awem.dragReor({ from: $('#b2'), to: '#b2', sel: '.card', handle: '.handle' });
    });
</script>

<div class="board" id="b2">
    <div class="card">
        <div class="handle"></div>
        <div class="big">a</div>
    </div>

    <div class="card">
        <div class="handle"></div>
        <div class="big">b</div>
    </div>

    <div class="card">
        <div class="handle"></div>
        <div class="big">c</div>
    </div>
</div>

<div class="frame">
    <script>
        var selected = [];

        // used by the grids to tell the server which items to include/exclude
        function getSelected() {
            return { selected: selected };
        }

        $(function () {
            $('#MealsGrid1, #MealsGrid2').on('awedrop', function (e, data) {
                var row = $(e.target);
                $('#log').prepend(aweUtils.model(row).Name + ' moved from ' + data.from.closest('.awe-grid').attr('id') +
                    ' to ' + row.closest('.awe-grid').attr('id') + '<br/>');

                selected = $('#MealsGrid2').find('.awe-row').map(function (i, el) { return $(el).data('k'); }).get();
            });
        });
    </script>

    @{
        var columns = new[]
        {
            new Column {Bind = "Id", Width = 100},
            new Column {Bind = "Name"},
            new Column {Bind = "Description", Grow = 7 }.Mod(o => o.Autohide())
        };
    }

    @(Html.Awe().Grid("MealsGrid1")
        .Url(Url.Action("MealsGridSrc"))            
        .Mod(o => o.ColumnsSelector())
        .MovableRows(new MoveRowsOpt { Ids = new string[] { "MealsGrid1", "MealsGrid2" } })
        .Height(200)
        .Paging(false)
        .ParameterFunc("getSelected")
        .Groupable(false)
        .Columns(columns))
    <br />
    <br />
    @(Html.Awe().Grid("MealsGrid2")
        .Url(Url.Action("MealsGridSel"))
        .Mod(o => o.ColumnsSelector())
        .MovableRows(new MoveRowsOpt { Ids = new string[] { "MealsGrid1", "MealsGrid2" } })
        .Height(200)
        .Paging(false)
        .ParameterFunc("getSelected")
        .Groupable(false)
        .Columns(columns))
</div>

public IActionResult MealsGridSrc(GridParams g, int[] selected)
{
    selected = selected ?? new int[] { };
    var items = Db.Meals.Where(o => !selected.Contains(o.Id)).AsQueryable();
    return Json(new GridModelBuilder<Meal>(items, g) { Key = "Id" }.Build());
}

public IActionResult MealsGridSel(GridParams g, int[] selected)
{
    selected = selected ?? new int[] { };
    var items = Db.Meals.Where(o => selected.Contains(o.Id)).AsQueryable();
    return Json(new GridModelBuilder<Meal>(items, g) { Key = "Id" }.Build());
}