diff --git a/BlazorReorderList/Reorder.razor b/BlazorReorderList/Reorder.razor
index a6f0fbe..8bdeacf 100644
--- a/BlazorReorderList/Reorder.razor
+++ b/BlazorReorderList/Reorder.razor
@@ -19,7 +19,7 @@
@foreach (var item in Items.Select((v, i) => (v, i)))
{
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)
}
@@ -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);
diff --git a/BlazorReorderList/ReorderService.cs b/BlazorReorderList/ReorderService.cs
index d5ecf47..80e5d62 100644
--- a/BlazorReorderList/ReorderService.cs
+++ b/BlazorReorderList/ReorderService.cs
@@ -71,10 +71,10 @@ public class ReorderService : IAsyncDisposable
return await module.InvokeAsync("getPosition", el);
}
- public async ValueTask getPoint(MouseEventArgs ev)
+ public async ValueTask getPoint(double PageX, double PageY, double ClientX, double ClientY)
{
var module = await moduleTask.Value;
- return await module.InvokeAsync("getPoint", ev.PageX, ev.PageY, ev.ClientX, ev.ClientY);
+ return await module.InvokeAsync("getPoint", PageX, PageY, ClientX, ClientY);
}
public async ValueTask getClientRect(ElementReference el)
diff --git a/BlazorReorderList/wwwroot/ReorderJsInterop.js b/BlazorReorderList/wwwroot/ReorderJsInterop.js
index 21125d6..bc25c29 100644
--- a/BlazorReorderList/wwwroot/ReorderJsInterop.js
+++ b/BlazorReorderList/wwwroot/ReorderJsInterop.js
@@ -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);
}