root/BlazorReorder
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

* touch events

Browse source
This commit is contained in:
Santiago Cattaneo 2022-04-18 14:14:59 -03:00
parent 6c1798d957
commit 15a8b57321
3 changed files with 22 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
BlazorReorderList/Reorder.razor
View file

@ -19,7 +19,7 @@
@foreach (var item in Items.Select((v, i) => (v, i)))
{
<div @ref="itemElem[item.i]" @key="item.i" class="item @((object)item.v == (object)rs.selected ? "active" : "")"
@onmousedown="async (e) => await onPress(e, item.v, item.i)">
@onmousedown="async (e) => await onPress(e, item.v, item.i)" @ontouchstart="async (e) => await onTouch(e, item.v, item.i)">
@ChildContent(item.v)
</div>
}
@ -87,7 +87,23 @@
var ghostElem = itemElem[index];
elemWidth = await rs.getWidth(ghostElem);
elemPosition = await rs.getPosition(ghostElem);
clickPosition = await rs.getPoint(m);
clickPosition = await rs.getPoint(m.PageX, m.PageY, m.ClientX, m.ClientY);
TItem? clone = Copy != null ? Copy(item) : default(TItem);
rs.Set(Items, clone != null ? clone : item, index, clickPosition, clone != null);
await OnStart.InvokeAsync(rs.selected);
}
public async Task onTouch(TouchEventArgs m, TItem item, int index)
{
if (Disabled || DisableDrag) return;
if (itemElem == null) return;
shouldRender = false; // Because the method triggers re-render, the click propagation is canceled, if you have a link/or any click event inside it's going to stop working
var ghostElem = itemElem[index];
elemWidth = await rs.getWidth(ghostElem);
elemPosition = await rs.getPosition(ghostElem);
var p = m.TargetTouches.First();
clickPosition = await rs.getPoint(p.PageX, p.PageY, p.ClientX, p.ClientY);
TItem? clone = Copy != null ? Copy(item) : default(TItem);
rs.Set(Items, clone != null ? clone : item, index, clickPosition, clone != null);
await OnStart.InvokeAsync(rs.selected);

4
BlazorReorderList/ReorderService.cs
View file

@ -71,10 +71,10 @@ public class ReorderService<TItem> : IAsyncDisposable
return await module.InvokeAsync<point>("getPosition", el);
}
public async ValueTask<point> getPoint(MouseEventArgs ev)
public async ValueTask<point> getPoint(double PageX, double PageY, double ClientX, double ClientY)
{
var module = await moduleTask.Value;
return await module.InvokeAsync<point>("getPoint", ev.PageX, ev.PageY, ev.ClientX, ev.ClientY);
return await module.InvokeAsync<point>("getPoint", PageX, PageY, ClientX, ClientY);
}
public async ValueTask<clientRect> getClientRect(ElementReference el)

3
BlazorReorderList/wwwroot/ReorderJsInterop.js
View file

@ -30,7 +30,8 @@ export function removeEvents(dotNet) {
// only invoke events form the collection
function onMove(e) {
var point = getPoint(e.pageX, e.pageY, e.clientX, e.clientY);
var p = e.touches && e.touches.length > 0 ? e.touches[0] : e;
var point = getPoint(p.pageX, p.pageY, p.clientX, p.clientY);
for (var i = 0; i < dotNetInstance.length; i++) {
dotNetInstance[i].invokeMethodAsync("onMove", point);
}