draggable 相关问题

一个能够被拖动的元素。

是否可以在无框窗口中用于拖动窗口的自定义标题栏添加事件监听器?

向无框窗口添加了自定义标题栏,以使窗口可拖动。标题栏显示,但 eventListener 不会触发: main.js: const createWindow = () => { 常量胜利=新

回答 2 投票 0

在 React Native 中创建一个可拖动、可调整大小的框

我到处寻找一种方法来创建具有可拖动和可调整大小功能的视图。我已经接近了react-native-gesture-handler包,但是可调整大小的角是......

回答 2 投票 0

无框窗口中的自定义标题栏是否可以添加事件监听器?

向无框窗口添加了自定义标题栏,以使窗口可拖动。标题栏显示,但 eventListener 不会触发: main.js: const createWindow = () => { 常量胜利=新

回答 2 投票 0

Electron:是否可以在无框窗口中的自定义标题栏添加事件监听器?

向无框窗口添加了自定义标题栏,以使窗口可拖动。标题栏显示,但 eventListener 不会触发: main.js: const createWindow = () => { 常量胜利=新

回答 1 投票 0

当 LongPressGesture 处于视图状态时,使用 onMove 拖动不起作用

我想在 iOS 的队列屏幕上实现类似于 Apple Podcast 应用程序的行为。具体来说,我需要: 长按每一行后显示上下文菜单,带有

回答 1 投票 0

如何使用Cinemachine获取鼠标位置?

//计算鼠标的世界位置。 var worldPos = Camera.main.ScreenToWorldPoint(Input.mousePosition); 这段代码是我用来获取鼠标位置的代码,但是在使用

回答 2 投票 0

可拖动 LI 使用 JavaScript 通过 SVG-Lines 连接

以下是到目前为止想要连接那些父子ul li的图像 我将感谢你的帮助。 我想创建一个可扩展的列表,其中的 Children-li 连接到他们的

回答 1 投票 0

可拖动div但只能通过标题移动?仅 JavaScript

我已经有了可拖动元素等,但我想让它只能通过标题移动,这样您仍然可以突出显示/单击 div 中的内容。我只能使用 JavaScript :) 我得到了这段代码...

回答 1 投票 0

如何让可拖动元素能够通过按钮关闭?

我很困惑,我已经盯着这段代码看了一个小时了 我很困惑,我已经连续盯着这个代码一个小时了 我想制作一个可拖动的弹出窗口(得到那部分),但我希望它能够关闭和打开?我希望按钮位于可拖动元素内。这就是我到目前为止所得到的,任何事情都会非常有帮助,因为我不知道我做错了什么:,D ps!我只能使用 html+css+javascript,不能使用 jquery :( var mydragg = function() { return { move: function(divid, xpos, ypos) { divid.style.left = xpos + 'px'; divid.style.top = ypos + 'px'; }, startMoving: function(divid, container, evt) { evt = evt || window.event; var posX = evt.clientX, posY = evt.clientY, divTop = divid.style.top, divLeft = divid.style.left, eWi = parseInt(divid.style.width), eHe = parseInt(divid.style.height), cWi = parseInt(document.getElementById(container).style.width), cHe = parseInt(document.getElementById(container).style.height); document.getElementById(container).style.cursor = 'move'; divTop = divTop.replace('px', ''); divLeft = divLeft.replace('px', ''); var diffX = posX - divLeft, diffY = posY - divTop; document.onmousemove = function(evt) { evt = evt || window.event; var posX = evt.clientX, posY = evt.clientY, aX = posX - diffX, aY = posY - diffY; if (aX < 0) aX = 0; if (aY < 0) aY = 0; if (aX + eWi > cWi) aX = cWi - eWi; if (aY + eHe > cHe) aY = cHe - eHe; mydragg.move(divid, aX, aY); } }, stopMoving: function(container) { var a = document.createElement('script'); document.getElementById(container).style.cursor = 'default'; document.onmousemove = function() {} }, } }(); function close() { document.getElementById('elem').style.display = 'none'; } .container { position: absolute; background-color: blue; } .elem { position:absolute; background-color: green; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; } <div class="container" id='container' style="width: 600px;height: 400px;top:50px;left:50px;"> <div class="elem" id="elem" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");' style="width: 200px;height: 100px;"> <button onClick="close()"> x </button> </div> </div> close关键字是保留的,这就是为什么不调用该函数的原因。您需要更改函数名称。 var mydragg = function() { return { move: function(divid, xpos, ypos) { divid.style.left = xpos + 'px'; divid.style.top = ypos + 'px'; }, startMoving: function(divid, container, evt) { evt = evt || window.event; var posX = evt.clientX, posY = evt.clientY, divTop = divid.style.top, divLeft = divid.style.left, eWi = parseInt(divid.style.width), eHe = parseInt(divid.style.height), cWi = parseInt(document.getElementById(container).style.width), cHe = parseInt(document.getElementById(container).style.height); document.getElementById(container).style.cursor = 'move'; divTop = divTop.replace('px', ''); divLeft = divLeft.replace('px', ''); var diffX = posX - divLeft, diffY = posY - divTop; document.onmousemove = function(evt) { evt = evt || window.event; var posX = evt.clientX, posY = evt.clientY, aX = posX - diffX, aY = posY - diffY; if (aX < 0) aX = 0; if (aY < 0) aY = 0; if (aX + eWi > cWi) aX = cWi - eWi; if (aY + eHe > cHe) aY = cHe - eHe; mydragg.move(divid, aX, aY); } }, stopMoving: function(container) { var a = document.createElement('script'); document.getElementById(container).style.cursor = 'default'; document.onmousemove = function() {} }, } }(); function closePopup() { document.getElementById('elem').style.display = 'none'; } function openPopup() { document.getElementById('elem').style.display = 'block'; } .container { position: absolute; background-color: blue; } .elem { position:absolute; background-color: green; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; } <div class="container" id='container' style="width: 600px;height: 400px;top:50px;left:50px;"> <div class="elem" id="elem" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");' style="width: 200px;height: 100px;"> <button onClick="closePopup()"> x </button> </div> </div> <button onclick="openPopup()">Open Popup</button>

回答 1 投票 0

cdkDragPlaceholder 不适用于水平拖放

我正在开发一个涉及元素水平拖放的网站。 我能够进行水平拖放。但我需要用户确定他实际放置元素的位置。为了...

回答 1 投票 0

使用 React 拖放至包裹的 Flex 项目

我必须为一些动态创建的列表项创建拖放功能,如下图所示: 这里,项目将使用 flex 来显示,项目将使用 flex-...

回答 1 投票 0

父元素溢出对于不同的子元素有不同的行为?

我无法让一个孩子覆盖父母溢出,但不能让另一个孩子覆盖 #第二行{ 显示:网格; 网格模板列:重复(5,1fr); 间隙:0px; 高度:503px; } .在...

回答 1 投票 0

dnd-kit:相对于鼠标指针拖动而不是可拖动

使用@dnd-kit/core,默认行为是让被拖动的元素(以及 DragOverlay 中的 div)相对于其原始位置进行拖动。如果我单击并拖动 Draggable 到某个位置...

回答 1 投票 0

不能使用png作为可拖动对象?

我正在开发一个程序,需要将图像(在本例中为消防车)拖放到地图上。我用 jquery 完成了这段代码,效果很好。我现在正在尝试用 pure

回答 1 投票 0

使用 dnd-kit 时监听器发生冲突

我正在开发一个待办事项列表应用程序,我想让待办事项可拖动。 我正在使用 dnd-kit 来实现相同的目的。 我在父容器中提供了 DndContext 和 SortableContext。

回答 1 投票 0

如何在抓取拖放元素时删除加号图标

我正在尝试删除dragenter上抓取光标上的加号图标。 我试过: 函数拖开始(e){ e.dataTransfer.effectAllowed = '无'; } 函数拖拽输入(e) { e.preventDef...

回答 1 投票 0

Web动画api填充模式混乱,(影响可拖动元素后续交互)

所以我有这个简单的例子,它模仿棋盘中的可拖动棋子。 在指针向上时,我想执行回弹动画以恢复起始位置。 好吧,如果我不指定它就可以工作......

回答 1 投票 0

如果使用变换比例,为什么 jquery ui 可拖动包含不起作用

我有一些代码可以说明这个问题。 JSFIDDLE 我有一个可以拖动的元素,效果很好。我添加了一个允许用户“放大”的按钮。这我...

回答 1 投票 0

我需要React可拖动可调整大小的库,仅在元素的某些部分上拖动 - “react-moveable”

我正在寻找一些React库,这将使我的仅在元素的某些部分可拖动,可调整大小。 我找到了“react-moveable”库,它使我的元素变得拖沓...... 我正在寻找一些 React 库,这将使我的 <div> 仅在元素的某些部分可拖动,可调整大小。 我找到了“react-moveable”库,它使我的元素可拖动和可调整大小,但我需要我的用户能够在可拖动组件中工作,而不仅仅是移动它。 任何人都知道如何做到这一点,或者可以建议任何其他能够做到这一点的图书馆吗? 谢谢您的建议! 您可能想查看react-rnd,它似乎满足您的要求

回答 1 投票 0

允许将项目拖动到窗口高度以下。普通 JavaScript

我正在尝试为我的客户构建一个网站,这与 Miro(或其他白板应用程序)没有什么不同。 这个概念是使用绝对定位来布局各个元素,但管理......

回答 1 投票 0

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.