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
Id
Name
Description

show code
DragAndDropDemo.aspx
<% GridReord.Grid()
.Url(Page.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())); %>
<awe:Ocon runat="server" ID="GridReord" />
<br />
<button type="button" onclick="getIds()" class="awe-btn">get ids</button>
<div id="log" class="log"></div>

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

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

From one grid to another 

Id
Name
Description
315Barley a source of fermentable material for beer and certain distilled beverages, and as a component of various health foods
311OatsThey have been in cultivation for over 4,000 years
307BuckwheatDespite the name, buckwheat is not related to wheat
303WheatWheat is a type of grass grown all over the world for its highly nutritious and useful grain.
299RiceRice is a keystone of the grass family that produces a vast number of grains
295MongongoIn addition to producing a highly useful lightweight, durable wood, the mongongo tree also yields a distinctive fruit
291AlmondsAlmonds come in two varieties, sweet and bitter
287WalnutsA walnut is a seed from a tree in the genus Juglans
283ChestnutsThey have creamy white sweet flesh which appears in a number of cuisines
279HazelnutsHazelnuts are produced by hazel trees
275LettuceLeaf lettuce is often very lightweight and ruffly, with a wrinkly surface and a soft, almost velvety texture
271CauliflowerAs a general rule, the head is white, but variants of cauliflower come in purple and green as well
267ArtichokeThe globe artichoke enjoys a long history of both lore and cooking preparation
263BroccoliSometimes broccoli is compared to tiny trees
259CeleryAlthough originally cultivated for its perceived medicinal qualities, celery has since made the jump into the daily diets
255CarrotThe rich orange color of carrots comes from beta carotene, which also happens to be very good for optical health
251Onion It is possible to chop the greens into small pieces for salads and as a garnish
247CucumberLike the tomato, the cucumber is a fruit. Botanically speaking, a fruit is the mature ovary of a flowering plant
243PotatoA potato is a starchy edible tuber native to South America and cultivated all over the world
239TomatoThe tomato fruit is consumed in diverse ways, including raw, as an ingredient in many dishes and sauces
235CherryThe cherry is the fruit of many plants of the genus Prunus, and is a fleshy stone fruit
231BananaBananas come in a variety of sizes and colors when ripe, including yellow, purple, and red.
227PapayaThe papaya is a large tree-like plant, with a single stem growing from 5 to 10 metres
223AppleThe apple is the pomaceous fruit of the apple tree
219MangoThe mango is a fleshy stone fruit belonging to the genus Mangifera


Id
Name
Description
show code
DragAndDropDemo.aspx
<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(aweUtils.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>

Simple drag and drop demo 

drag source

a
b
c

drop target

show code
DragAndDropDemo.aspx
<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>

Drag Cards and Items 

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


show code
DragAndDropDemo.aspx
<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>

Handle 

a
b
c
show code
DragAndDropDemo.aspx
<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.
A
B
C
X
Y
Z
show code
DragAndDropDemo.aspx
<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