源元素 准备消息 在将源元素拖放到目标元素之前，目标元素如下所示 源元素 <span class="Multiterm Multiterm-"> Ready Messages</span> 在将源元素拖放到目标元素之前，目标元素如下所示 <div class="react-grid-layout LightTheme dashboardGridLayout" style="height: 5px;"></div> 将源元素拖放到目标元素后，目标元素如下所示 <div class="react-grid-layout LightTheme dashboardGridLayout" style="height: 365px;"> <div id="1" class="react-grid-item LightTheme widget draggableArea react-draggable cssTransforms react-resizable" data-grid="[object Object]" data-coordinate="2:1" style="height: 265px; position: absolute; transform: translate(180px, 90px) !important; width: 355px !important;"> <div class="widgetTopDiv"> <span class="LightTheme widgetSpan"> <span class="Multiterm Multiterm-"> Ready Messages</span> </span> <span class="LightTheme filterSpan"> <img src="./static/media/filter_applied.4d67f99c.svg" class="LightTheme widgetFilterIcon" draggable="false"> </span> <span class="actionDeleteSpan"> <img id="1" src="./static/media/copy.5d595a98.svg" class="LightTheme widgetCopyIcon" draggable="false"> <img src="./static/media/Edit_123.b70c7de2.svg" class="LightTheme widgetEditIcon" draggable="false"> <img src="./static/media/close.ae62c28e.svg" class="LightTheme widgetDeleteIcon" draggable="false"> </span> </div> <div id="chartWidget_1" class="chartDataItem"> <span class="settingsIcon"> <img class="LightTheme settingsIcon" src="./static/media/No data loaded.612d838a.svg" draggable="false"> </span> </div> <span class="react-resizable-handle react-resizable-handle-se"></span> </div> </div> 我的规格文件test.cy.js来测试上述场景 cy.visit("link-to-site") cy.get('#Username').type('user-name') cy.contains('Continue').click() cy.get('#Password').type('password') cy.get("button[value='login']").click() cy.wait(10000) cy.get(".newDashboard.LightTheme.LiButton_DefaultClass").click() cy.wait(3000) cy.get("#menuExpanIcon").click() const drag_source = "span[id='24_dashboardKpiMenu'] span span[class='Multiterm Multiterm-']" const drag_target = ".react-grid-layout.LightTheme.dashboardGridLayout" cy.wait(1000) const dataTransfer = new DataTransfer(); cy.get(drag_source).trigger('dragstart', { dataTransfer }); cy.get(drag_target).trigger('drop', {force: true}, { dataTransfer }) 测试在 Cypress 上运行完美并通过，但 UI 中未发生拖动操作。 听起来测试在 UI 更改完成之前就提前结束了。 目前您正在使用眼球断言方法，但这不是执行自动化测试的方法。 如果在拖动操作后添加断言来确认是否成功，测试会更加可靠。 cy.get(drag_source).trigger('dragstart', {dataTransfer}) cy.get(drag_target).trigger('drop', {force: true}, {dataTransfer}) cy.get(drag_target).find('.widgetTopDiv') 顺便说一句，将所有 cy.wait(3000) 替换为单击操作后更改的元素的其他断言。 一般来说，您在测试中采取的每个操作都应该有相应的确认查询，按照排列/操作/断言模式。
我的一个网站具有拖放功能。一旦您开始拖动我的可拖动 div 之一，就会出现所拖动元素的透明预览。这实际上妨碍了我的用户
我得到了这个房间，还有一些家具。 1. 我希望在放下家具时，家具位于地板上方而不是地板下方。 2. 我想交换家具，所以当你掉下来的时候...
我试图在放置区域上方时更改光标，我在询问之前看到了这些问题，但没有多大帮助：Q1、Q2 和 Q3。 这是我尝试过的。 首先我尝试在dragstar中更改它...
我正在尝试使用拖放来重新排序列表中的元素（纯Javascript）。我想在拖动操作期间对“幽灵元素”进行样式化。 因为我读到没有st...
背景语境 我设法使用普通元素和事件侦听器学习了拖放 API 的基础知识。但我想看看是否可以使用 Web Compone 重新创建相同的功能...
javascript和vuejs中有什么方法可以检测离开容器的dragevent吗？
我目前正在 vuejs 中实现一个待办事项应用程序。待办事项应用程序必须具有拖放功能，允许用户在列表中的元素之前或之后拖动，并且应该更新...
react-beautiful-dnd 在看板的初始渲染中不起作用
我已成功将看板添加到我的 Next.js 和 TypeScript 项目中。 但是，我在初始渲染期间遇到了一个小问题，当我刷新页面时，拖放功能却没有出现
我有两个选项卡（使用boostrap构建），每个选项卡都有自己的表格。 我需要将表行从一个选项卡拖放到另一个选项卡表中。拖动时我想打开光标下的选项卡......
会尽力变得更加简洁和清晰。 制作游戏时，我确实使用拖放操作，但想将其放在“面板”上，然后将其添加到同一面板中的列表中。嗯，它已经可以工作了
是否可以减慢可拖动元素的速度？ 我用 jQuery 拖放构建了一个简单的滑块。当滑块元素（可拖动元素）移动到某些位置时，会出现 p...
我正在尝试使 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,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAwJCRcVExgWFhYaGBcaGB0dHh0XHxoeGhYXIR0lJSAdIB8mLTwxJik4Kh8gMkkzOD5AREVFJTBMUktNUj1DRUUBDQ4OExETJhUVJUUnJSdBQUFBQUFFQUFBQUFBQUFBQUFBQUFFQUFBQUFBRUFBRUFBQUFFQUFFQUVBQUFFQUFBQf/AABEIAGQAZAMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAEBQADBgIBB//EADQQAAEDAgMFBgQGAwAAAAAAAAEAAgMEERIhMQUGQVFhEyJxgZGxFDJioSNCU8HR8AdSov/EABgBAAMBAQAAAAAAAAAAAAAAAAECAwQA/8QAIREAAgICAgIDAQAAAAAAAAAAAAECEQMhEjEEQRQiURP/2gAMAwEAAhEDEQA/AE+zaMPJLhk3hzKcBiD2U4WLeOqZtCwy7NiJHQ9q0tw3dwsM0CNiz/pOyy0W/wB36djIQ63edr6pqIgTcqscVq2SlkpmA2dudLIQZO437p/DuRTjUFx8VpwF6qrGkTc2zOt3Opgb4L+ypl3KgLbN7py9s1qF4m4IHJmLbuOwOu5xIvkBy5I9u6NKRazh5rSqmVvJDhEPOR863j2C2mcCwkseTkfy9L+qV00oyYfLwWp3qeXNaDwcVmOyGvFZsiSkaIO1sK7I8lEJnzUSDgsbSDcZFMI6x3EArjsV2yJMIbHd6cvibwsSFpWrObtwhsd1ogVrj0jNLs7UXOJQOTCnSi5uh6uvihbilkbG3S7iBc8hzXHBN1y5DUdfFOzHDI2Rh/Mwhwv4hXErjjP7zUBkju3Ue3FZ6GiZhsbkra1zcTCOYWUlhLSVmzLdl8T1QIaBvAlRXF5UULLAAYrWRq+OK6IbGOS6wGg2SQIwmockdDLYAJrHIt66Mj7EO+G0nwsh/CfLE5zg9sTixzyG3Y24zte5IGuHyOc/x9JVtqntlxtiexz+zeSez7wwkA5tvdwtxtfgvoM7GSNLHtDmnUOAIPkqqWliiBETGsBNzhAFzzKNy69BtUey7YhbMIHSWkIuBY2tnnfTgVkd9YKztw+B7WxyU5hJcLhl3Ev7wBLS4YM/p6BaOXYtO+TtHRNLs/DPXLrx5o/HZDfo5OmYz/Hew5aUzOc68b2t0xBrngnNt9bC2fG/RblzlT2q5c9dv2Bu2cVDsktkgDgQSiJ5kGH5EpMq+o0HsWSR2NvZRXEKLGaS2kom4BJK7Azhzd4K8Mp3D8OQ4uTrZpHtOrMkgZezWjIdAqw4CxGRHJJdqw8TQQxm1wb2NiOXVN4ZBZZ2gnxXPNMmX4FXxeQkqkSni3aD5ZghPjRey9EZOp9FZFSxjVoPinl5MF1sRYmVfGrk1qM7GP8ATCrfCz/QIPyl+BWJllPIOKufI2yWlltCqnyO5p/kY6B/KR7NGXH5gB1uq5w0NAb1zOpVEktkLPNdo81mlmc3Xossaijt0gUQDnqIBAZsxj6WK4jqLFUUdWCLH5XZHoVJaCUG7Gl7OBaL+qSOtMo97HWzpLaZC+nJO4ZVlKF7m3DgRoc03p6pTmthRoGSKwPSllSrRUpDqGWNcOkQPxKrdUI2CgmSZBSzKqSdCSTLhqJPOh+37qpmffIJbVVlnYRwyVIK2BjB1ULr1IjVqK3EQCp5Sw5aHUHQphFXAfLI6M8syPUJI9/X7heCVvEhU42LdDwVlnXx4vI/um8M2Joc3T2KxwnbwIRdHtYwuuLEcQdCOqSWO1oZTNfHVK8VSS020o5Rf5Tyv+6KDeRWZxoqmmMfiV4ahA4HKBpQoIS6ZUukJXJLR8xHqlVdt8MJZGLuHEjIeA4powctIVySDaupETfrIy6dUiz8fFCuqnPOJ1yTzREZHL3WiMOKJ8rPc/6FFeCOv3XqNhoUEXXIgBUUVESZW+ID+heRsBKiiNgDGNw5gkI6lqCTb2yUUU2MhpG48z6ldP0OZ8yVFFEoKJ6lxNtPDVASQNuooqrRNlLmBuiKhfa3dB6m/wDKiidgQW2o+lv/AF/KiiiAx//Z' 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 中其前后的任何内容的合成，通常是正文背景，因此透明度不起作用。
React-Beautiful-Dnd 在组件重新渲染后不起作用
我正在使用 React-Beautiful-Dnd 并尝试拖放列表中的某些项目，当用户开始拖动任何项目以使其看起来更紧凑时，这些项目将改变外观的预期行为...
我目前正在使用 Angular 2 和 https://material.angular.io/cdk/drag-drop/overview 中的拖放模块。我已经使拖放功能起作用了。我有两种不同类型的课程...
我有两个列表 #sortable1 和 #sortable 2，它们是连接的可排序项，如本例所示。 您可以将列表项从 sortable1 拖放到 sortable 2。但是，如果 sortable 1 中的某个项目
cdkDrag 自由拖放在使用 Angular、Angular 材质拖放的 cdkDropList 中不起作用
我尝试使用 cdkDrag 拖放项目（在任何地方自由拖放），并且无需 cdkDropList 即可工作。我可以在两个容器之间交换项目（可用服务 <=> Dropbox
用户可以通过拖放列表项来重新排序。问题是？如果他们想继续向上滚动，比如说，将项目从底部重新定位到顶部？同时
Compose Drag Drop（在组件之间传递数据）-从下到上滚动时，可拖动项目状态不会改变
我正在使用 Jetpack Compose 实现拖放功能。它已经能够将数据从一个地方拖放到另一个地方，并在可拖动项目满足上下方向时自动滚动...
无法在包含嵌入 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>
这两个属性之间的关系似乎是一些混乱的根源。基于阅读 MDN 网站和 MSDN，我以为我已经弄清楚了，但现在我不确定...... 我