Drag and Drop demo

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

<script>
    $(function () {
        awem.dragAndDrop({
            from: $('.dropZone'),
            sel: '.dragItem', // what we can drag
            dropSel: '.dropZone', // where we can drop
            //tof: function() {
            //    // alternative way to determine where we are allowed to drop
            //    // evaluated when we start dragging
            //    return $('.dropZone').map(function (i, el) { return $(el); }).get();
            //},
            hover: function (cx) {
                cx.cont.addClass('awe-highlight');
            },
            drop: function (cx) {
                cx.cont.append(cx.drgo);
            },
            reshov: function () {
                $('.dropZone').removeClass('awe-highlight');
            },
            hide: 1 // hide drag object while dragging
        });
    });
</script>

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

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

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

<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(utils.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.MovableRows("MealsGrid1", "MealsGrid2").ColumnsSelector())
          .Height(200)
          .Paging(false)
          .ParameterFunc("getSelected")
          .Groupable(false)
          .Columns(columns))
    <br />
    <br />
    @(Html.Awe().Grid("MealsGrid2")
          .Url(Url.Action("MealsGridSel"))
          .Mod(o => o.MovableRows("MealsGrid1", "MealsGrid2").ColumnsSelector())
          .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());
}

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

        // don't drag board when mouse down on .item
        function cancel(cx) { return $(cx.e.target).closest('.item').length; }

        awem.dragReor({ from: $('#board1'), to: '#board1', sel: '.card', cancel: cancel });

        // write to log
        $('#board1').on('awedrop', function (e, data) {
            var o = $(e.target);
            var msg = name(o) + ' moved from ' + name(data.from) + ' to ' + name(o.parent()) +
                ' | previ = ' + data.previ + ' newi = ' + o.index();
            $('#logci').html(msg + '</br>');
        });

        function name(o) {
            var r = o.attr('class');
            if (o.data('k')) r += ' ' + o.data('k');
            if (o.hasClass('item')) r = o.html();
            return r;
        }
    });
</script>

<div class="board" id="board1">
    <div class="card" data-k="a">
        <div class="item">item 1</div>
        <div class="item">item 2</div>
        <div class="item">item 3</div>
    </div>

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

    <div class="card" data-k="c">
        <div class="item">item 6</div>
        <div class="item">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>

<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>