Awesome ASP.net Core and MVC Controls
Drag and Drop demo
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', // 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>
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(utils.model(row).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(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>
Demos/Grid/DragAndDropDemoController.cs
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());
}
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' });
// 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>
Drag 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>
Sticky placeholder, drag reorder and drop while outside of the drop area
Cards can be reordered using drag and drop, you can drag and drop the card while dragging outside and around of the drop area.
Used for the multiselect to reorder selected items.
Used for the multiselect to reorder selected items.
A
B
C
X
Y
Z
Shared/Demos/ReorderCardsSplh.cshtml
<script>
$(function () {
awem.dragReor({
from: $('#board0'),
to: 'body', // execute drop/hover over body
sel: '.mcard',
splh: 1, // sticky placeholder
gcon: function (cx) {
// get drop/hov container ( default was 'body' (to) )
return $('#board0');
}
});
});
</script>
<div class="board" id="board0">
<div class="mcard">
<div class="big">A</div>
</div>
<div class="mcard">
<div class="big">B</div>
</div>
<div class="mcard">
<div class="big">C</div>
</div>
<div class="mcard">
<div class="big">X</div>
</div>
<div class="mcard">
<div class="big">Y</div>
</div>
<div class="mcard">
<div class="big">Z</div>
</div>
</div>
<style>
#board0 {
max-width: 26em;
}
.mcard.o-plh {
background: #f8da4e !important;
color: #915608 !important;
}
</style>
Comments