如何解决如何防止在 Blazor 中拖放过程中移动设备出现滑动
我正在尝试在 Blazor 中实现 div 的拖放。 我似乎让它在桌面设备上工作,但是当从移动设备访问同一页面时,拖放不仅会移动 div(有时),还会滚动页面(在不进行拖放时应该这样做) . 我曾尝试将这些添加到 dragMeContainer 定义中,但没有成功:
@ontouchmove:preventDefault="true"
@ontouchcancel:preventDefault="true"
@ontouchcancel:stopPropagation="true"
@ontouchmove:stopPropagation="true"
有人知道如何在移动设备上拖放时停止滚动吗?
@page "/"
<style>
.postItIcon {
color: gold;
font-size: x-large;
}
.dragMeContainer {
width: 150px;
padding-right: 5px;
padding-left: 5px;
min-height: 50px;
background-color: gold;
position: absolute;
float: left;
border: 1px solid lightgray;
color: black !important;
}
.dragMetoolbar {
font-weight: bold;
padding-right: 0px;
color: gray !important;
}
</style>
<div ondragover="event.preventDefault();" ondragstart="event.dataTransfer.setData('',event.target.id);"
@ondrop="@(async (DragEventArgs args) => {await HandleDrop(args);})"
style="height: 1200px; width:1200px;">
<h1>Drag n drop</h1>
</div>
@if (_postIts != null)
{
foreach (PostItModel note in _postIts)
{
<div class="dragMeContainer" style="top: @(note.Y)px; left: @(note.X)px;" draggable="true"
ondragover="event.preventDefault();"
@ondragstart="@((DragEventArgs args) => HandleDragStart(note,args))"
@ondrop="@(async (DragEventArgs args) => {await HandleDrop(args);})"
@ontouchstart="@((TouchEventArgs args) => HandleDragStart(note,args))"
@ontouchmove="@((TouchEventArgs args) => HandletouchMove(note,args))"
@ontouchend="@(async (TouchEventArgs args) => {await HandleDrop(args);})">
<div class="dragMetoolbar">
<b>Drag me</b>
</div>
<div id="PostIt@(note.Id)">@note.Description</div>
</div>
}
}
@code {
public List<PostItModel> _postIts { get; set; }
public PostItModel _postItPayload { get; set; }
double _mouseRelativetoDraggedElementX = 0;
double _mouseRelativetoDraggedElementY = 0;
double _newPositionX = 0;
double _newPositionY = 0;
public class PostItModel
{
public int Id { get; set; }
public string Description { get; set; }
public int X { get; set; }
public int Y { get; set; }
}
protected override async Task OnInitializedAsync()
{
_postIts = new List<PostItModel>();
_postIts.Add(new PostItModel { Id = 1,Description="Drag me around",X=10,Y=100 });
_postIts.Add(new PostItModel { Id = 2,Description="Drag me up using mobile",X=100,Y=200 });
}
private void HandleDragStart(PostItModel selectedPostIt,dynamic args)
{
_postItPayload = selectedPostIt;
if (args.GetType() == typeof(DragEventArgs))
{
_mouseRelativetoDraggedElementX = args.ClientX;
_mouseRelativetoDraggedElementY = args.ClientY;
}
else if (args.GetType() == typeof(TouchEventArgs))
{
_mouseRelativetoDraggedElementX = args.Targettouches[0].PageX - selectedPostIt.X;
_mouseRelativetoDraggedElementY = args.Targettouches[0].PageY - selectedPostIt.Y;
}
}
private void HandletouchMove(PostItModel selectedPostIt,TouchEventArgs args)
{
_newPositionX = args.Targettouches[0].PageX;
_newPositionY = args.Targettouches[0].PageY;
selectedPostIt.X = Convert.ToInt32((_newPositionX - _mouseRelativetoDraggedElementX));
selectedPostIt.Y = Convert.ToInt32((_newPositionY - _mouseRelativetoDraggedElementY));
}
private async Task HandleDrop(dynamic args)
{
int X = 0;
int Y = 0;
if (args.GetType() == typeof(DragEventArgs))
{
X = _postItPayload.X + Convert.ToInt32(args.ClientX - _mouseRelativetoDraggedElementX);
Y = _postItPayload.Y + Convert.ToInt32(args.ClientY - _mouseRelativetoDraggedElementY);
}
else if (args.GetType() == typeof(TouchEventArgs))
{
X = Convert.ToInt32((_newPositionX - _mouseRelativetoDraggedElementX));
Y = Convert.ToInt32((_newPositionY - _mouseRelativetoDraggedElementY));
}
var postIt = _postIts.SingleOrDefault(x => x.Id == _postItPayload.Id);
if (postIt != null)
{
postIt.X = X;
postIt.Y = Y;
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。