Drag and Drop demo

Grid reorder rows

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

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>

Drag Cards and Items

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


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

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

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>

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>



Comments