drag-and-drop 相关问题

react-beautiful-dnd 在看板的初始渲染中不起作用

我已成功将看板添加到我的 Next.js 和 TypeScript 项目中。但是，我在初始渲染期间遇到了一个小问题，当我刷新页面时，拖放功能却没有出现

javascript reactjs next.js drag-and-drop react-beautiful-dnd

回答 1 投票 0

将表行从一个选项卡表拖放到另一个选项卡表

我有两个选项卡（使用boostrap构建），每个选项卡都有自己的表格。我需要将表行从一个选项卡拖放到另一个选项卡表中。拖动时我想打开光标下的选项卡......

jquery jquery-ui twitter-bootstrap drag-and-drop

回答 1 投票 0

拖放，拖放被他的孩子挡住了，如何避免？

会尽力变得更加简洁和清晰。制作游戏时，我确实使用拖放操作，但想将其放在“面板”上，然后将其添加到同一面板中的列表中。嗯，它已经可以工作了

drag-and-drop parent-child godot gdscript

回答 1 投票 0

jQuery 拖放速度变慢

是否可以减慢可拖动元素的速度？我用 jQuery 拖放构建了一个简单的滑块。当滑块元素（可拖动元素）移动到某些位置时，会出现 p...

javascript jquery jquery-ui drag-and-drop slider

回答 1 投票 0

如何防止Vuejs中dragstart时出现短暂闪烁

我正在尝试使 DIV 可拖动。除了 startdrag 时镜头闪烁之外，一切都运行良好。这是问题的 JSFiddle 下面是到目前为止的代码： ... 我正在尝试使 DIV 可拖动。除了 startdrag 时镜头闪烁之外，一切都运行良好。这是问题的JSFiddle 以下是到目前为止的代码： <template> <div> <div id="mydiv" :style="{ top: cordY + 'px', left: cordX + 'px' }"> <div id="mydivheader" draggable @dragstart="dragStart" @drag="dragging" @dragend="dragEnd">DRAG</div> <p>BLA</p> <p>BLA</p> <p>BLA</p> </div> </div> </template> <script> export default { name: 'Home', data () { return { cordY: 200, cordX: 200, divY: 0, divX: 0 } }, methods: { dragStart: function (e) { var img = new Image() img.src = '../assets/nonexisting.png' e.dataTransfer.setDragImage(img, 10, 10) this.divX = e.pageX - e.target.getClientRects()[0].left this.divY = e.pageY - e.target.getClientRects()[0].top this.cordY = e.pageY - this.divY this.cordX = e.pageX - this.divX }, dragging: function (e) { this.cordY = e.pageY - this.divY this.cordX = e.pageX - this.divX }, dragEnd: function (e) { this.cordY = e.pageY - this.divY this.cordX = e.pageX - this.divX } } } </script> 期望的结果是一个可拖动的元素，并且在开始时不会闪烁。您的解决方案在 Firefox 和 Chrome 中存在不同的问题。在 Firefox 中：当 dragstart 由于 e.pageX|Y 且 e.clientX|Y 始终为 0 时，您会遇到 flicker 问题。查看 firefox Bugzilla #505521 了解更多详细信息。解决方法是监听文档上的 dragover 事件，而不是可拖动元素中的 drag。 new Vue({ el: "#app", data: { cordY: 200, cordX: 200, divY: 0, divX: 0, delay: 20 }, mounted () { document.addEventListener('dragover', this.dragover, false) // remember to remove the event listener before some-when like Vue.beforeDestroy. }, methods: { dragStart: function (e) { // https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/ // HIDE GHOST/DRAG IMAGE BY REPLACING IT WITH A CUSTOM OR NONEXISTING IMAGE var img = new Image() img.src = 'data:image/jpeg;base64,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' e.dataTransfer.setDragImage(img, 10, 10) this.divX = e.pageX - e.target.getClientRects()[0].left this.divY = e.pageY - e.target.getClientRects()[0].top this.cordY = e.pageY - this.divY this.cordX = e.pageX - this.divX }, dragover: function (e) { this.cordY = e.pageY - this.divY this.cordX = e.pageX - this.divX }, dragEnd: function (e) { } } }) #mydiv { position: absolute; width:150px; z-index: 9; background-color: #f1f1f1; border: 1px solid #d3d3d3; text-align: center; resize: both; overflow:auto } #mydivheader { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> <div id="mydiv" :style="{ top: cordY + 'px', left: cordX + 'px' }"> <div id="mydivheader" draggable @dragstart="dragStart" @dragend="dragEnd">DRAG</div> <p>BLA</p> <p>BLA</p> <p>BLA</p> </div> </div> </div> 在 Chrome 中：使用一个 setTimeout 来控制 Frame Rate 将改善渲染效果。你会发现，如果 data property=this.delay 小于或等于 10，则可拖动元素会更频繁地闪烁。如果 20 个或更多，则很少发生闪烁。闪烁是由 DraggingEvent.pageX/Y 返回 (0, 0) 有时在拖动结束前的最后一帧引起的。我发现网上有人问类似的问题，但是没有好的答案。 new Vue({ el: "#app", data: { cordY: 200, cordX: 200, divY: 0, divX: 0, timer: null, delay: 20, draging: false }, methods: { dragStart: function (e) { // https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/ // HIDE GHOST/DRAG IMAGE BY REPLACING IT WITH A CUSTOM OR NONEXISTING IMAGE var img = new Image() img.src = 'data:image/jpeg;base64,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' e.dataTransfer.setDragImage(img, 10, 10) this.divX = e.pageX - e.target.getClientRects()[0].left this.divY = e.pageY - e.target.getClientRects()[0].top this.cordY = e.pageY - this.divY this.cordX = e.pageX - this.divX this.draging = true }, dragging: function (e) { if (this.timer) return; this.timer = setTimeout(() => { this.timer = null if (!this.draging) return this.cordY = e.pageY - this.divY this.cordX = e.pageX - this.divX }, this.delay) }, dragEnd: function (e) { this.draging = false this.cordY = e.pageY - this.divY this.cordX = e.pageX - this.divX } } }) #mydiv { position: absolute; width:150px; z-index: 9; background-color: #f1f1f1; border: 1px solid #d3d3d3; text-align: center; resize: both; overflow:auto } #mydivheader { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> <div id="mydiv" :style="{ top: cordY + 'px', left: cordX + 'px' }"> <div id="mydivheader" draggable @dragstart="dragStart" @drag="dragging" @dragend="dragEnd">DRAG</div> <p>BLA</p> <p>BLA</p> <p>BLA</p> </div> </div> </div> 下面是一张 gif，它显示了 DND 在 Chrome 中的工作原理：正如我到目前为止所尝试的那样，使用 dragover 解决方案似乎在这两个方面都工作得很好 Chrome 和 Firefox。（3年后）闪烁是因为设置为拖动图像时，拖动图像尚未渲染。您可以通过提前创建拖动图像（而不是在事件处理程序中）并将其存储在窗口外坐标来消除闪烁。 Chrome 在处理拖动图像的方式上存在缺陷（2023 年 9 月）。它们必须在 DOM 中，并且拖动图像包括 DOM 中其前后的任何内容的合成，通常是正文背景，因此透明度不起作用。

javascript vue.js drag-and-drop

回答 2 投票 0

React-Beautiful-Dnd 在组件重新渲染后不起作用

我正在使用 React-Beautiful-Dnd 并尝试拖放列表中的某些项目，当用户开始拖动任何项目以使其看起来更紧凑时，这些项目将改变外观的预期行为...

javascript reactjs drag-and-drop react-beautiful-dnd

回答 1 投票 0

Angular cdkDropList 拖动元素限制

我目前正在使用 Angular 2 和 https://material.angular.io/cdk/drag-drop/overview 中的拖放模块。我已经使拖放功能起作用了。我有两种不同类型的课程...

javascript html angular drag-and-drop angular-cdk

回答 2 投票 0

防止 JqueryUI 可排序中列表项的删除

我有两个列表 #sortable1 和 #sortable 2，它们是连接的可排序项，如本例所示。您可以将列表项从 sortable1 拖放到 sortable 2。但是，如果 sortable 1 中的某个项目

jquery jquery-ui drag-and-drop jquery-ui-sortable

回答 8 投票 0

cdkDrag 自由拖放在使用 Angular、Angular 材质拖放的 cdkDropList 中不起作用

我尝试使用 cdkDrag 拖放项目（在任何地方自由拖放），并且无需 cdkDropList 即可工作。我可以在两个容器之间交换项目（可用服务 <=> Dropbox

javascript angular angular-material drag-and-drop angular-cdk

回答 1 投票 0

如何在用户拖放时增加“开始滚动”区域的大小？

用户可以通过拖放列表项来重新排序。问题是？如果他们想继续向上滚动，比如说，将项目从底部重新定位到顶部？同时

javascript html scroll drag-and-drop

回答 1 投票 0

Compose Drag Drop（在组件之间传递数据）-从下到上滚动时，可拖动项目状态不会改变

我正在使用 Jetpack Compose 实现拖放功能。它已经能够将数据从一个地方拖放到另一个地方，并在可拖动项目满足上下方向时自动滚动...

android kotlin drag-and-drop android-jetpack-compose

回答 1 投票 0

无法在包含嵌入 SVG 图像的 div 元素上执行 Shift + 拖动

我有一个可拖动的 div，其中包含一个嵌入的 SVG 图像，如下所示：我有一个可拖动的 div，其中包含一个嵌入的 SVG 图像，如下所示： <div draggable="true"> <svg width="160" height="40" xmlns="http://www.w3.org/2000/svg"> <g> <text x="26.5" y="15" style="font-size: 20px;">Drag me</text> </g> </svg> </div> 我可以拖动 div，我可以执行 Alt + 拖动，但是当我执行 Shift + 拖动时没有任何反应，显然根本没有调用拖动开始事件。如何让 Shift + 拖动起作用？请注意这里提到的错误：使用 Shift 键拖动在 Chrome 中不起作用似乎在最新版本的 Chrome 中已修复，但我提到的问题仍然存在。这是 Chromium 中的一个已知错误，Firefox 工作正常 https://bugs.chromium.org/p/chromium/issues/detail?id=982219 如果元素有节点（除文本之外），则无法启动 Shift-Drag 操作如果您一键开始拖动，您可以在拖动过程中添加shift键如果您先单击“根”Textnode，您可以按住 Shift 键开始拖动（点击 SO 片段下面项目中的“标签”一词）如果拖动 SVG 是您的目标，请阅读：https://www.petercollingridge.co.uk/tutorials/svg/interactive/dragging/ <script> function initDrag(tag, html = 'No HTML content') { document.body.appendChild(Object.assign(document.createElement(tag),{ innerHTML : `tag:${tag} ` + html, ondrag : evt => LOG.innerHTML = `Shift ${evt.shiftKey?"On":"Off"} ` })).setAttribute("draggable", "true"); } let htmlContent = `<b style="color:red;font-size:20px">with HTML content</b>`; initDrag("h3"); initDrag("h3", htmlContent); initDrag("div"); initDrag("div", htmlContent); </script> <h2 id="LOG" style="background:lightgreen">[shift key state]</h2>

javascript svg drag-and-drop

回答 1 投票 0

HTML5拖放效果允许和dropEffect

这两个属性之间的关系似乎是一些混乱的根源。基于阅读 MDN 网站和 MSDN，我以为我已经弄清楚了，但现在我不确定...... 我

javascript html jquery drag-and-drop mouse-cursor

回答 1 投票 0

反应美丽的 DND：检测到非连续 <Draggable /> 索引 - 重新排序时出错

首次对某些元素重新排序后使用 https://www.npmjs.com/package/react-beautiful-dnd ，无法对先前移动的项目进行重新排序，并且控制台会打印无法...

reactjs drag-and-drop react-dnd react-beautiful-dnd

回答 2 投票 0

有没有办法在 C# 中不使用 x32 库来读取 .msg 文件？

我正在处理一个具有启用了 DragAndDrop 属性的 PictureBox 的表单。我想要完成的是让用户能够从 Microsoft Outlook 应用程序中拖动电子邮件。我