Drag and Drop demo

<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.ClientID %>, #<%=MealsGrid2.ClientID %>').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.ClientID %>').find('.awe-row').map(function (i, el) { return $(el).data('k'); }).get();
            });
        });
    </script>

    <% MealsGrid1.Grid()
        .Url(Page.Url().Action("MealsGridSrc", "DragAndDropDemo"))
        .Mod(o => o.MovableRows(MealsGrid1.ClientID, MealsGrid2.ClientID).ColumnsSelector())
        .Height(200)
        .Paging(false)
        .ParameterFunc("getSelected")
        .Groupable(false)
        .Columns(
            new Column { Bind = "Id", Width = 100 },
            new Column { Bind = "Name", Width = 200 },
            new Column { Bind = "Description" }.Mod(o => o.Autohide())); %>
    <awe:Ocon runat="server" ID="MealsGrid1" />
    <br />
    <br />
    <% MealsGrid2.Grid()
        .Url(Page.Url().Action("MealsGridSel", "DragAndDropDemo"))
        .Mod(o => o.MovableRows(MealsGrid1.ClientID, MealsGrid2.ClientID).ColumnsSelector())
        .Height(200)
        .Paging(false)
        .ParameterFunc("getSelected")
        .Groupable(false)
        .Columns(
            new Column { Bind = "Id", Width = 100 },
            new Column { Bind = "Name", Width = 200 },
            new Column { Bind = "Description" }.Mod(o => o.Autohide())); %>
    <awe:Ocon runat="server" ID="MealsGrid2" />
</div>

public ActionResult 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 ActionResult 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());
}

<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',
            dropSel: '.dropZone',
            hover: function (cx) {
                cx.cont.addClass('awe-highlight');
            },
            drop: function (cx) {
                cx.cont.append(cx.drgo);
            },
            reshov: function () {
                $('.dropZone').removeClass('awe-highlight');
            },
            hide: 1
        });
    });
</script>

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

    .dragItem {
        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' });

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