Drag and Drop demo

on touch you can scroll the grids with movable rows by touching from the right or left side of the grid

Grid reorder rows



DragAndDropDemo/Index.cshtml
@(Html.Awe().Grid("GridReord")
.Url(Url.Action("MealsGrid", "Data"))
.Mod(o => o.MovableRows())
.Height(300)
.Paging(false)
.Groupable(false)
.Sortable(false)
.Columns(
new Column { Bind = "Id", Width = 100 },
new Column { Bind = "Name", Width = 200 },
new Column { Bind = "Description" }.Mod(o => o.Autohide())))
<br />
<button type="button" onclick="getIds()" class="awe-btn">get ids</button>
<div id="log" class="log"></div>

<script>
$(function () {
$('#GridReord').on('awedrop', function (e, data) {
var row = $(e.target);
$('#log').prepend(row.data('model').Name + ' moved from ' + data.previ + ' to ' + row.index() + '<br/>');
});
});

function getIds() {
var ids = $('#GridReord').find('.awe-row').map(function (i, el) { return $(el).data('k'); }).get();
$('#log').html(JSON.stringify(ids));
}
</script>

From one grid to another



DragAndDropDemo/Index.cshtml
<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(row.data('model').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>

@(Html.Awe().Grid("MealsGrid1")
.Url(Url.Action("MealsGridSrc"))
.Mod(o => o.MovableRows("MealsGrid1", "MealsGrid2").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())))
<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(
new Column { Bind = "Id", Width = 100 },
new Column { Bind = "Name", Width = 200 },
new Column { Bind = "Description" }.Mod(o => o.Autohide())))
</div>
Demos/Grid/DragAndDropDemoController.cs
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());
}

Simple drag and drop demo

drag source

a
b
c

drop target

DragAndDropDemo/Index.cshtml
<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 (cont) {
cont.addClass('awe-highlight');
},
drop: function (cont, dragObj) {
cont.append(dragObj);
},
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>

Cards and Items

item 1
item 2
item 3
item 4
item 5
item 6
item 7


DragAndDropDemo/Index.cshtml
<script>
$(function () {
awem.dragReor({ from: $('#b1 .card'), to: '#b1 .card', sel: '.item' });

function cancel(istouch, startCoords, dragObj, e) { if ($(e.target).closest('.item').length) return 1; }

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

$('#b1').on('awedrop', function (e) {
var dobj = $(e.target);
var msg = '';
var prev = dobj.prev();
var isItem = dobj.hasClass('item');

if (isItem) {
msg += dobj.html() + ' moved on card ' + dobj.closest('.card').data('k');
} else {
msg += 'card ' + dobj.data('k') + ' moved';
}

if (prev.length) {
msg += ' after ' + (isItem ? prev.html() : prev.data('k'));
} else {
msg += ' as first';
}

$('#logci').prepend(msg + '</br>');
});
});
</script>

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

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

<div class="card" data-k="3">
<div class="item">item 6</div>
<div class="item">item 7</div>
</div>
</div>

<br />
<br />

<div id="logci" class="log"></div>

<style>
.board {
overflow-anchor: none;
}

.card {
display: inline-block;
width: 15em;
padding: 2em 0 0;
vertical-align: top;
background: #EDEFF0;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px;
margin: .3em;
overflow: auto;
height: 15em;
}

.item {
background: #3c8dbc;
color: white;
border-radius: 5px;
margin: .5em;
padding: .5em 1em;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px;
}

.item.o-plh, .card.o-plh {
background: #f8da4e !important;
color: #915608 !important;
}
</style>

Handle

a
b
c
DragAndDropDemo/Index.cshtml
<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>

<style>
.handle {
border-radius: 3px;
height: 3em;
margin-top: -1em;
background-color: #607d8b;
}

.big {
font-size: 5.5em;
text-align: center;
color: gray;
}
</style>