大风拖动在.NET Core 3.0和.NET 6.0之间折断

发布于 2025-02-12 01:31:53 字数 1965 浏览 1 评论 0原文

我跟随 chris saintys demo demo 对于拖放而言，这是非常聪明的。可以从他的 polyfill 使该示例在移动设备上工作。

<script id="DragDropTouch" src="https://bernardo-castilho.github.io/DragDropTouch/DragDropTouch.js"></script>

我使用“ nofollow noreferrer”>传送带效果很好（iOS手机上的Safari和Chrome）。不幸的是，如果我从.NET Core 3.0将演示升级到.NET 6.0，则@ondragstart和@ondrop不再在移动设备上发射。奇怪的是，即使在Mobile上忽略了这一事件，但它们仍然由JavaScript提出。因此，多填充仍在工作。

例如，在移动设备上，以下JavaScript dragStart 正在触发;

document.addEventListener('dragstart', function(ev) {
    if (ev.target.classList.contains('draggable')) {
        console.log('dragging');
    } else {
        console.log('ignoring draggable');
    }
});

以下blaor dragstart 被忽略;

<li class="draggable" draggable="true" title="@JobModel.Description" @ondragstart="@(() => HandleDragStart(JobModel))" >
    <p class="description">@JobModel.Description</p>
    <p class="last-updated"><small>Last Updated</small> @JobModel.LastUpdated.ToString("HH:mm.ss tt")</p>
</li>

@code {
    [CascadingParameter] JobsContainer Container { get; set; }
    [Parameter] public JobModel JobModel { get; set; }

    private void HandleDragStart(JobModel selectedJob)
    {
        Container.Payload = selectedJob;
    }
}

通过升级.NET版本引起这种行为吗？

注意，在.NET 6.0和.NET Core 3.0中的桌面版本上，一切正常。

编辑：我添加了一些

原文

I followed Chris Saintys demo for drag and drop which was very clever. The source can be downloaded from his git. I added the polyfill to make the example work on mobile.

<script id="DragDropTouch" src="https://bernardo-castilho.github.io/DragDropTouch/DragDropTouch.js"></script>

I use Conveyor to debug drag and drop on mobile and everything works great (Safari and Chrome on IOS mobile ). Unfortunately if I upgrade the demo to .NET 6.0 from .NET Core 3.0 the @ondragstart and @ondrop no longer fire on the mobile. It's odd that even though on mobile the events are ignored on blazor, they are still raised by javascript. Therefore the polyfill is still working.

For example on mobile while the following javascript dragstart is firing;

document.addEventListener('dragstart', function(ev) {
    if (ev.target.classList.contains('draggable')) {
        console.log('dragging');
    } else {
        console.log('ignoring draggable');
    }
});

The following blaor dragstart is being ignored;

<li class="draggable" draggable="true" title="@JobModel.Description" @ondragstart="@(() => HandleDragStart(JobModel))" >
    <p class="description">@JobModel.Description</p>
    <p class="last-updated"><small>Last Updated</small> @JobModel.LastUpdated.ToString("HH:mm.ss tt")</p>
</li>

@code {
    [CascadingParameter] JobsContainer Container { get; set; }
    [Parameter] public JobModel JobModel { get; set; }

    private void HandleDragStart(JobModel selectedJob)
    {
        Container.Payload = selectedJob;
    }
}

What could be causing this behavior by upgrading .NET versions?

Note that everything works perfectly fine on desktop versions in both .NET 6.0 and .NET Core 3.0.

EDIT: I've added some repositories to demonstrate this issue.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

止于盛夏 2025-02-19 01:31:54

那是多填充。可以在此处找到.NET 6.0的修复：

回复收藏 0 原文

栩栩如生 2025-02-19 01:31:54

解决方案在这里：

在index.html中，添加此行：
“脚本id =” dragdroptouch“ src =” js/
dragdroptouch.js
“ var dataTransfer =（function（）{... block）：
object.defineproperty（datatransfer.protype，“ files”，{
/**
*添加为.NET6 Blazor服务器的修复程序
/
get：function（）{
返回 {};
}，，
枚举：是的，
可配置：正确
}）;
object.defineproperty（dataTransfer.protype，“ items”，{
/*
*添加为.NET6 Blazor服务器的修复程序
*/
get：function（）{
返回 {};
}，，
枚举：是的，
可配置：正确
}）;