Drag and Drop, Grid move and reorder rows
Simple drag and drop demo
drag source
a
b
c
drop target
DragAndDropDemo/Index.cshtml
<div class="dropZone">
<p>drag source</p>
<div class="ditem">a</div>
<div class="ditem">b</div>
<div class="ditem">c</div>
</div>
<br />
<div class="dropZone">
<p>drop target</p>
</div>
<script>
$(function () {
awem.dragReor({
from: $('.dropZone'),
sel: '.ditem', // what we can drag
to: '.dropZone',
noReorder: true
});
});
</script>
<style>
.dropZone {
border: 1px solid #9E9E9E;
border-radius: 2px;
height: 100px;
padding: 5px;
}
.dropZone.awe-highlight {
background-color: #ffdfb3 !important;
}
.ditem.o-plh {
filter: opacity(.5);
}
.ditem {
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
Can drag cards to reorder them on the board and items to move them from one card to another.
Using o-dragCont and o-dragItm classes to avoid dragging a card when trying to drag an item (alternative would be to use cancel func for the drag card call to awem.dragReor).
Using o-dragCont and o-dragItm classes to avoid dragging a card when trying to drag an item (alternative would be to use cancel func for the drag card call to awem.dragReor).
Shared/Demos/CardsAndItems.cshtml
<script>
$(function () {
awem.dragReor({ from: $('#board1 .card'), to: '#board1 .card', sel: '.item' });
awem.dragReor({ from: $('#board1'), to: '#board1', sel: '.card'});
});
</script>
<div class="board" id="board1">
<div class="card o-dragCont" data-k="a">
<div class="item o-dragItm">item 1</div>
<div class="item o-dragItm">item 2</div>
<div class="item o-dragItm">item 3</div>
</div>
<div class="card o-dragCont" data-k="b">
<div class="item o-dragItm">item 4</div>
<div class="item o-dragItm">item 5</div>
</div>
<div class="card o-dragCont" data-k="c">
<div class="item o-dragItm">item 6</div>
<div class="item o-dragItm">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 and Drop Count
Mango
Apple
Papaya
Banana
Cherry
Tomato
Potato
Cucumber
Onion
Carrot
Apple 1
Papaya 2
Dragging multiple times the same item will increase its count. Dragging it back will remove it.
Using onFakeDrop option to handle the drop ourselves instead of just dropping the drag element where the placeholder was shown.
Using onFakeDrop option to handle the drop ourselves instead of just dropping the drag element where the placeholder was shown.
Shared/Demos/DragAndDropCount.cshtml
<div class="board" id="dragCountBoard">
<div class="card source">
@foreach (var itm in meals)
{
<div class="item o-dragItm" data-k="@itm.Id">@itm.Name <span class="val"></span></div>
}
</div>
@foreach (var basket in baskets)
{
<div class="card basket o-dragCont" data-k="@basket.Id">
@foreach (var itm in basket.Items)
{
<div class="item o-dragItm" data-k="@itm.Key.Id">
@itm.Key.Name <span class="val">@itm.Value</span>
</div>
}
</div>
}
</div>
<script>
$(function () {
awem.dragReor({
from: $('#dragCountBoard'),
sel: ".source .item",
to: '#dragCountBoard .card',
hide: false, // don't hide dragElm while dragging
noPlh: true, // no placeholder
onFakeDrop: function (cx) {
var dragElm = cx.dropElm;
var dragElmKey = dragElm.data('k');
var toCont = cx.cont;
var existingElm = toCont.find('.item[data-k=' + dragElmKey + ']:not(.o-plh)');
if (existingElm.length) {
incItemCount(existingElm);
}
else {
var clone = dragElm.clone();
toCont.append(clone);
incItemCount(clone);
}
}
});
awem.dragReor({
from: $('#dragCountBoard'),
sel: ".basket .item",
to: '#dragCountBoard .source',
noHide: true,
noPlh: true,
onFakeDrop: function (cx) {
cx.dropElm.remove();
}
});
function incItemCount(elm) {
var count = elm.find('.val').html();
count++;
elm.find('.val').html(count);
}
});
</script>
<style>
.o-dragForb.card {
opacity: .5;
transition: all .2s;
}
.o-dragForb .item.o-plh {
background: #ccc !important;
color: white !important;
}
.cardh {
padding: 0 1em;
}
</style>
Drag and Drop Groups
All
Apple
Papaya
Potato
Cucumber
Broccoli
Artichoke
Chestnuts
Walnuts
Wheat
Buckwheat
Fruits
Mango
Legumes
Tomato
Vegetables
Celery
Nuts and Grains
Hazelnuts
Rice
Restricting where the dragged item can be dropped by setting data-ogroup attribute on the dragged item and drag containers.
The last basket accepts 2 groups, data-ogroup can have comma separated values.
First (All) basket has no data-ogroup set and it can accept any item.
The dragged container will get an o-dragForb class when a non allowed item is hovering it.
The dragged container will get an o-dragForb class when a non allowed item is hovering it.
Shared/Demos/DragGrouped.cshtml
<div id="gboard">
@foreach (var basket in baskets)
{
<div class="gcard card o-dragItm o-dragCont" data-k="@basket.Id" data-ogroup="@basket.Category">
<div class="cardh">@(basket.Name ?? basket.Category)</div>
@foreach (var itm in basket.Items)
{
<div class="item o-dragItm" data-k="@itm.Id" data-ogroup="@itm.CategoryName">
@itm.Name
</div>
}
</div>
}
</div>
<script>
$(function(){
awem.dragReor({
from: $('#gboard'),
sel: ".item",
to: '#gboard .gcard'
});
});
</script>
<style>
.o-dragForb.card {
opacity: .5;
transition: all .2s;
}
.o-dragForb .item.o-plh {
background: #ccc !important;
color: white !important;
}
.cardh {
padding: 0 1em;
}
</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>
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 = DemoCache.Meals.Where(o => !selected.Contains(o.Id)).AsQueryable();
return Json(new GridModelBuilder<MealDto>(items, g) { Key = "Id" }.Build());
}
public IActionResult MealsGridSel(GridParams g, int[] selected)
{
selected = selected ?? new int[] { };
var items = DemoCache.Meals.Where(o => selected.Contains(o.Id)).AsQueryable();
return Json(new GridModelBuilder<MealDto>(items, g) { Key = "Id" }.Build());
}
Comments