问题标签 [html5-draggable]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
228 浏览

javascript - Angularjs指令使HTML元素可拖动并且其中的HTML字段可选择或可修改

我尝试了很多东西,但没有一个有效。因此,发布相同的内容。

这是背景:

我有这个HTML元素,它将基于ng-repeat动态创建一个矩形框。在每个Rectangular框中都有各种 HTML 元素,例如HTML select and input textetc,用户可以编辑这些字段。我想制作这个矩形框draggable,以便用户可以移动它。

因此,我写了一个angularjs directive来做它并且它工作正常但是如果我添加指令,那么框内的select字段和所有字段rectangular都不再可编辑,因为它适用draggable directive于整个rectangular. 如果我删除此指令,那么它会正常工作。我怎样才能使rectangular盒子draggable以及其中的字段是selectable or editable

HTML CODE

Angularjs Directive:

一瞥我正在努力实现的目标

我试图改变一些东西,但它们都不起作用。当我尝试将 添加draggable到矩形框中时,默认情况下其中的字段会获取draggable directive,因此它们的default行为被angularjs directive. 如果有人可以在这里为我提供一些指导,我将不胜感激。

0 投票
1 回答
95 浏览

html - 如何使用拖放 HTML API 显示可放置区域

我正在实现一个功能,用户可以对列表进行排序并重新排序元素,在拖动时我想在拖动元素下方显示可放置区域。

注意:我想使用本机 javascript 来实现这一点

0 投票
0 回答
203 浏览

javascript - 移动设备上的拖放问题

现在,我按照W3School中的示例开发了使用 KonvaJS 进行拖放的 Web 应用程序,移动设备也可以使用它。
到目前为止,它可以在使用 Mozilla Firefox 的桌面模式和移动设备模式下工作。但是,它不适用于使用 Google Chrome 浏览器的移动设备模式。这是有问题的代码。

如果你能想出解决方案来处理不同浏览器中的拖放行为,请告诉我你的分辨率确实有效。

0 投票
0 回答
40 浏览

javascript - HTML5 原生拖放:是否可以在拖动元素时更改预览?

我想在拖动元素时更改预览。(见setDragImage

例如,如果用户在拖动时按 ctrl 或 shift ,则使用另一个元素?

是一个例子。此示例在您开始拖动操作时显示图像。但是,如果您想即时更改它,那将是非常具有挑战性的!

甚至可能吗?

0 投票
0 回答
27 浏览

javascript - 除 FireFox 之外的所有浏览器上的 HTML DragAndDrop 问题

我正在尝试实现 html Drag and Drop,这是我过去在同一个项目及其工作中所做的。但是当我为我正在做的一个新部分创建它时,我当前的方法只适用于 Firefox。所有其他浏览器立即调用onDragEnd. onDragStart这是元素:

何时handleOnDrag在除 firefox 之外的任何东西上调用,其中onDrag定义了 prop 并立即触发结果onDragEndonDrag这个方法是在 Redux 视图容器上吗

我不确定为什么这会导致拖放立即结束。我已经尝试过使用,preventDefaultstopPropagation只是导致onDragEnd从未被解雇。

0 投票
1 回答
61 浏览

javascript - 开始拖拽一个带有 draggable 属性的 DOM 元素后,我们可以停止拖拽并退出拖拽吗?

拖动开始后,我必须停止异步拖动。我可以在拖动事件中添加一些东西来取消拖动吗?

0 投票
0 回答
138 浏览

html - 如何创建动态拖放占位符(HTML 或角度 CDK)

有谁知道如何使用 HTML 或角度 CDK 库创建动态占位符?

我尝试过使用 CDK 库,但无法获得合适的占位符。

如果我使用一些静态 div,那么我的布局会中断,而拖动只需要创建一些动态 div 或某种占位符。

目前,我正在拖动另一个 div 的 div 顶部,但预期的右框应仅向左移动,底部和左侧框应仅向右和底部移动。

ts.文件

预期的用户界面

预期的用户界面

0 投票
0 回答
12 浏览

html - 如何使文本和 svg 可拖动矩形成为放置到另一个 svg 矩形中的单个单元(修复),以便两者在 html 中同时移动

希望 SvgDraggable Rectangle 和其中的文本同时移动。在我的情况下,只有矩形在移动。