drag-and-drop 相关问题

如何在MAUI中使用拖放手势到CollectionView

我正在尝试在我的.NET MAUI 项目中实现 CollectionView 的拖放功能。 当我尝试拖动图像时，程序由于异常而暂停。我该如何解决这个问题？ 项目博士...

我们如何使用DnD API更新拖动图像？

我目前正在网络应用程序上开发拖放功能，我想在用户单击 ctrl 或 alt 按钮时添加一个视觉助手，就像 google Drive 所做的那样： 看来我们不能

如何读取html5中拖放的文件夹的文件内容

堆栈溢出和互联网上有很多关于此错误的问题，但是，大多数问题被询问和回答的上下文与我的不符。我正在做一个女孩...

如何使用Javascript的拖放Api对显示为网格的行和列进行排序

我有以下网格： 。网格 { 显示：网格； 网格模板列：100px 100px 100px 100px 100px； 网格模板-</desc> <question vote="0"> <p>我有以下网格：</p> <pre><code> &lt;html&gt; &lt;head&gt; &lt;style&gt; .grid { display: grid; grid-template-columns: 100px 100px 100px 100px 100px; grid-template-rows: 50px 50px 50px 50px; grid-gap: 10px; &amp; &gt; * { padding: 10px; border: 1px solid black; } &amp; &gt; div:first-child { border: none; } &amp; .column-header { background-color: lightgray; } &amp; .row-header { background-color: lightgray; } } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&#34;grid&#34;&gt; &lt;div&gt;&lt;/div&gt; &lt;div class=&#34;column-header&#34;&gt;Col 1&lt;/div&gt; &lt;div class=&#34;column-header&#34;&gt;Col 2&lt;/div&gt; &lt;div class=&#34;column-header&#34;&gt;Col 3&lt;/div&gt; &lt;div class=&#34;column-header&#34;&gt;Col 4&lt;/div&gt; &lt;div class=&#34;row-header&#34;&gt;Row 1&lt;/div&gt; &lt;div&gt;Cell 1.1&lt;/div&gt; &lt;div&gt;Cell 2.1&lt;/div&gt; &lt;div&gt;Cell 3.1&lt;/div&gt; &lt;div&gt;Cell 4.1&lt;/div&gt; &lt;div class=&#34;row-header&#34;&gt;Row 2&lt;/div&gt; &lt;div&gt;Cell 1.2&lt;/div&gt; &lt;div&gt;Cell 2.2&lt;/div&gt; &lt;div&gt;Cell 3.2&lt;/div&gt; &lt;div&gt;Cell 4.2&lt;/div&gt; &lt;div class=&#34;row-header&#34;&gt;Row 3&lt;/div&gt; &lt;div&gt;Cell 1.3&lt;/div&gt; &lt;div&gt;Cell 2.3&lt;/div&gt; &lt;div&gt;Cell 3.3&lt;/div&gt; &lt;div&gt;Cell 4.3&lt;/div&gt; &lt;div class=&#34;row-header&#34;&gt;Row 4&lt;/div&gt; &lt;div&gt;Cell 1.4&lt;/div&gt; &lt;div&gt;Cell 2.4&lt;/div&gt; &lt;div&gt;Cell 3.4&lt;/div&gt; &lt;div&gt;Cell 4.4&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/head&gt; </code></pre> <p>如何使用Javascript拖放API到：</p> <ol> <li>拖动任何“列标题”单元格并水平重新排列列</li> <li>拖动任何“行标题”单元格并垂直重新排列行</li> </ol> <p>？</p> </question> <answer tick="false" vote="0"> <p>也许这会有所帮助：尝试为列和行标题设置一些自定义属性，例如 <pre><code>draggable</code></pre> 到 <pre><code>true</code></pre></p> <p>网格结构假设每个单元格都是一个独立的元素。重新排列行或列涉及交换内容而不是重新排列 DOM 结构。该解决方案适用于简单网格。我不确定你的网格有多复杂。</p> <p>这是工作的<a href="https://codepen.io/tonkec/pen/jOjvbLa" rel="nofollow noreferrer">示例</a>，这是一个好的开始。</p> <p>您想重新排列整行和列还是仅重新排列标题？</p> <p>如果我可以进一步帮助您，请告诉我。</p> </answer> </body></html>

拖放到放置区时，拖动叠加会返回到原始位置

当可放置物品被放入放置区时，我试图不显示返回原点动画。 我不想直接禁用动画。 ”

Tkinter 树视图 - 获取光标下的项目 <ButtonPress-1>

我正在编写一个拖放应用程序，将数据从树视图拖到条目小部件。我希望能够在按下鼠标按钮时使用光标下方树中的项目。 我...

将文件拖放到 .sh 文件上

我对 Batch 有相当多的了解。我正在尝试将批处理脚本移植到 Mac/UNIX，但我的批处理文件具有拖放功能。通过无数次谷歌搜索，我...

Android中有没有办法控制拖动阴影的可见性？

目前我正在从事平板电脑Android开发。我想将视图从片段 A 拖动到片段 B，但是拖动阴影将第一次从目标位置移动到原始位置...

Qt：在拖放过程中拦截键盘事件

在执行拖放操作时，我想在状态栏中显示一些关于特定放置操作的预期效果的额外提示。 为此，我重写了dragMoveEvent()，这......

将 Outlook 中的信件或附件拖到 C++ 程序窗口时，拖放是如何工作的？

我想使用 WINAPI 实现从 MS Outlook（信件、附件）拖放到我的 C++ 程序中的窗口。 拖动常规文件似乎更容易理解 - 使用 WM_DROP...

Angular 中的拖放流程图生成器

需要创建一个成熟的拖放流程图构建器，具有角度箭头连接， 我尝试过 todo 的拖放功能，并在 angul 中使用材质角度版本 16 完成示例...

制作一个 CdkDrag 角度元素列表，当前一个元素关闭时，该元素不会移动

问题： 我有一个未定义的弹出窗口列表（用户可以根据需要打开）。这些窗口可以作为 CdkDrag 元素在应用程序上移动。如果我们关闭其中一个窗口就会出现问题，如下

在 Chrome 中反应拖放文件重新上传问题

已上传的文件再次上传时不会触发handleChange函数。它在火狐浏览器中运行良好。并且相同文件删除没有问题。 导入 React, { useState } from "react&...

将文件拖放到 WPF 中

我需要将图像文件拖放到我的 WPF 应用程序中。目前，当我放入文件时会触发一个事件，但我不知道下一步该怎么做。我如何获取图像？发送者对象是

拖放自定义对象

我有2个控件，一种形式：列表和树（具体类型名称不相关）。 在列表控件中，我执行 DoDragDrop 方法。作为第一个参数，我传递了一个与数据绑定的对象...

是否有一种简单的方法可以调整 Framer Motion 中可拖动元素的动量/惯性？

抱歉，如果这是一个愚蠢的问题 - 感觉它应该很简单，但我一直在搜索 Framer Motion 文档，谷歌搜索，在这里寻找以前的 Q/A，但都无济于事。 我有一个可拖动的

Blazor 拖放如何获取目标对象？

我似乎无法找出获取目标对象的正确方法。这是应该具有拖放功能的前端代码： ... 我似乎无法找出获取目标对象的正确方法。这是应该具有拖放功能的代码前端代码： <div class="pos-top"> <div id="imgGrid" class="grid bg-white" style="grid-template-columns:repeat(@columnCount, @(unitWidth)); grid-auto-flow:dense;"> @foreach (var b in blocks) { @if ((b.Placement[_pageType].Visible == true || showHiddenBlocks == true) && b.Zones != null && b.Zones.Contains(zone)) { var id = b.Id; <div class="[email protected] [email protected] relative border border-black box-border @(b.isDragOver?"dropped":"")" style=" order:@b.Placement[_pageType].Order;" @ondblclick="(() => ChangeBlockProperties(b))" draggable="true" data-block-id="@b.Id" id="@id" @ondrop="@((e) => ondropOver(b, blocks.ToList()))" ondragover="event.preventDefault();" @ondragstart="@((e) => ondragstart(e, b, blocks.ToList()))" @ondragenter="@(() => ondragenter(b))" @ondragleave="@(() => { b.isDragOver = false; })" @ondragend="@(() => ondragend(b, blocks.ToList()))"> <div class="blockNumberInfo absolute rounded-full bg-red-700 flex justify-center items-center border-2 border-black" style="width:40px;height:20px"> @b.LocalIndex / @b.Placement[_pageType].Order </div> </div> } } </div> } } </div> 这是我移动方块的代码： public async void ondropOver(FlyerBlock item, List<FlyerBlock> flyerBlocks) { DragEnter = null; if (DraggedItem == null) return; if (DraggedItem == item) return; DraggedItem.Placement[_pageType].Order = item.Placement[_pageType].Order; await BlockplacementEditService.SaveBlockChangesAsync(flyerBlocks, DraggedItem, DraggedItem.Placement[_pageType].Order, _pageType, zone); DraggedItem = null; item.isDragOver = false; //StateHasChanged(); } public void ondragstart(DragEventArgs e, FlyerBlock item, List<FlyerBlock> flyerBlocks) { e.DataTransfer.EffectAllowed = "move"; DraggedItem = item; DraggedItemPosition = item.Placement[_pageType].Order; } public void ondragenter(FlyerBlock item) { item.isDragOver = true; DragEnter = item; } public async void ondragend(FlyerBlock item, List<FlyerBlock> flyerBlocks) { item.isDragOver = false; if (DraggedItem == null) return; DragEnter = null; // item.isDragOver = true; } 我遇到的问题是我不知道如何将目标块传递到我的下拉事件中。我尝试使用 DragEventArgs 但这不起作用我也尝试使用 jsruntime 但我只能提取拖动的块。我希望能够获取目标块，以便我可以正确更新订单。任何帮助将不胜感激！ 这是我修改后的拖放服务。我将 Target 属性添加到 DragAndDropService.cs 类中，以便在放置时保持目标对象。 原始源代码可以在这里找到：https://www.radzen.com/blog/blazor-drag-and-drop/ using System; namespace MyToolSource.Data { public class DragAndDropService { public object Data { get; set; } public object Target { get; set; } public string Zone { get; set; } public void StartDrag(object data, object target, string zone) { this.Data = data; this.Target = target; this.Zone = zone; } public bool Accepts(string zone) { return this.Zone == zone; } } } 这是 Draggable.cs 类。 我添加了 Target 属性来保存目标对象。尽管此时您没有目标对象，但它必须具有稍后在 html 中使用 DropTarget 时将填充的属性。 @typeparam T @using MyToolSource.Data @inject DragAndDropService DragAndDropService <div draggable="true" @ondragstart="@OnDragStart"> @ChildContent </div> @code { [Parameter] public RenderFragment ChildContent { get; set; } [Parameter] public string Zone { get; set; } [Parameter] public T Target { get; set; } [Parameter] public T Data { get; set; } void OnDragStart() { // Notify the DragAndDropService what the current Data and Zone are. DragAndDropService.StartDrag(Data, Target, Zone); } } 这是 DropTrget.cs 类。我添加了 Target 属性，以便在源被删除后保存目标对象。 @using MyToolSource.Data @inject DragAndDropService DragAndDropService @typeparam T <div ondragover="event.preventDefault()" @ondrop="@OnDrop"> @ChildContent </div> @code { [Parameter] public RenderFragment? ChildContent { get; set; } [Parameter] public string Zone { get; set; } [Parameter] public T Target { get; set; } [Parameter] public Action<T,T>? Drop { get; set; } void OnDrop() { if (Drop != null && DragAndDropService.Accepts(Zone)) { Drop((T)DragAndDropService.Data, Target) ; } } } 在 HTML 中，将 Target=@customer 添加到 DropTarget 包装器。 <Draggable Data="@customer" > <td class="draggable customer-x"> @customer.FirstName </td> </Draggable> <DropTarget T="vCustomer" Drop="@OnDrop" Target=@customer > <td id="@customer.CustomerId" ></td> </DropTarget> OnDrop 方法。现在您已经有了目标对象，您可以使用它了。 string dropMessage = null; void OnDrop(vCustomer data, object target) { dropMessage = $"Dropped: {data.FirstName} on {((vCustomer)target).FirstName}"; // Important: Invoke StateHasChanged() to update the page StateHasChanged(); } 希望这有帮助！ 非常好的答案。 确实有帮助。 我通过调整它以适用于两种不同的类型，进一步概括了它。 我通过添加一个额外的类型参数来做到这一点。 这允许操作委托接受两种不同类型的参数。 对于将一个物体扔到另一个物体上很有用。 @using MyToolSource.Data @inject DragAndDropService DragAndDropService @typeparam T @typeparam U <div ondragover="event.preventDefault()" @ondrop=OnDrop> @ChildContent </div> @code { [Parameter] public RenderFragment ChildContent { get; set; } [Parameter] public string Zone { get; set; } [Parameter] public U Target { get; set; } [Parameter] public Action<T,U> Drop { get; set; } void OnDrop() { if (Drop != null && DragAndDropService.Accepts(Zone)) { Drop((T)DragAndDropService.Data, Target); } } } 然后你可以像这样使用它： <DropTarget T="vCustomer" U="DropZoneObjectType" Drop="@OnDrop" Target=@customer > <td id="@customer.CustomerId" ></td> </DropTarget> 就我而言，我正在向员工拖放一笔交易。 希望对其他人有帮助。

.Net MAUI 拖放在 Mac Catalyst 上失败

TL;DR——问题简而言之 Mac Catalyst 上的 .Net MAUI 应用程序的拖放功能似乎无法正常工作，但仅限于 Apple Silicon 设备。我需要修复或解决方法，但到目前为止我还没有成功......

Jquery UI 放置事件未触发

我正在尝试在应用程序中进行拖放操作。拖动部分工作正常，但放置部分不起作用。由于某种原因，掉落没有被触发/接受。 这就是拖累...

任何人都可以告诉我如何使 q-table 行在 quasar 中可拖动

我尝试过 vuedraggable 包和 quasar-ui-q-draggable-table 包，但它在 q-table quasar 中不起作用。 vuedraggable 包广泛用于 Vue.js 中的拖放操作