标签: drag-and-drop

HTML5 在多个浏览器窗口之间拖放多个元素

我使 HTML5 拖放对于单个元素来说工作得很好。这在多个浏览器中也运行良好，例如我打开了两个相同或不同的浏览器窗口，我可以从一个浏览器拖动元素并将元素放入另一个浏览器的拖放区中 - 这对于单个元素来说效果很好。

如果想选择多个元素并拖放，有谁知道如何使其工作？

html javascript drag-and-drop

Dip*_*kar

lucky-day

3
推荐指数

1
解决办法

5040
查看次数

WinRT 中是否存在拖放取消事件？

我正在寻找 Metro 中的拖/放取消事件，这意味着如果用户拖动一个项目并将其放到可放置区域之外。

我怎样才能实现这个目标或者有什么解决方法？

c# drag-and-drop windows-runtime

Lar*_*wel

2012 08-13

3
推荐指数

1
解决办法

1084
查看次数

HTML5 拖放放置区

我在拖放方面遇到问题。

\n\n

我的问题是，当一个元素被放入 dropzone 时，它有时会被插入到另一个元素中，而不是 dropzone div 中。

\n\n

jsFiddle： http: //jsfiddle.net/kMbPF/

\n\n

在示例中，您可以看到我将表格做得很大，这样就很容易看到这一点。当一个表被拖放到另一个表的顶部时，它不会与其他元素一起进入拖放区，而是被插入到另一个表的内部。

\n\n

我有几个想法，但我不知道它们是否可行。其中之一是是否可以在放置区上插入一个大的 div，以确保元素始终放入其中。我将其视为几乎透明的层，它捕获元素然后将它们放置在放置区域中。

\n\n

我的另一个想法是尝试从 div 获取所有数据，将其全部放入一个字符串中，并尝试解析它，然后将所有数据替换回拖放区。

\n\n

您还会注意到，排序可以工作，但似乎只在 Firefox 中有效，而在 Safari 中则无效。这不是我最紧迫的问题，但如果您确实看到了一个修复程序，那就太好了！（排序仅适用于上部拖放区）我不想使用 jQuery。

\n\n

代码：

\n\n

<!DOCTYPE html>\n\n<html lang="en">\n<head>\n    <title>Basic drag and drop example</title>\n\n    <style>\n    @CHARSET "UTF-8";\ntable.draggable-word {\n    background-color: red;\n    padding: 0px;\n    border: 1px solid green;\n    -webkit-touch-callout: none;\n    -webkit-user-select: none;\n    -khtml-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    border-collapse: collapse;\n    border-spacing: 0;\n    padding: 0;\n    margin: 0;\n    line-height: 1;\n    width: 100%;\n    height:50px;\n}\n\n.drop-div {\n    width: 150px;\n    height: …

Run Code Online (Sandbox Code Playgroud)

html javascript css php drag-and-drop

dan*_*382

2012 10-24

3
推荐指数

1
解决办法

4487
查看次数

Tkinter 拖放

我正在开发一个拖放功能，它允许我在画布上移动项目。我让它工作（有点），但我只稍微移动，但线穿过屏幕（并最终离开屏幕的可见部分）画布，所以我无法到达它。我不知道从这里去哪里。下面是我到目前为止创建的拖放代码：

def onPressToMove(self, event): #get initial location of object to be moved
    winX = event.x - self.workspace.canvasx(0)
    winY = event.y - self.workspace.canvasy(0)
    self.dragInfo["Widget"] = self.workspace.find_closest(event.x, event.y, halo = 5)[0]
    self.dragInfo["xCoord"] = winX
    self.dragInfo["yCoord"] = winY

def onReleaseToMove(self, event): #reset data on release
    self.dragInfo["Widget"] = None
    self.dragInfo["xCoord"] = 0
    self.dragInfo["yCoord"] = 0        

def onMovement(self, event):
    winX = event.x - self.workspace.canvasx(0)
    winY = event.y - self.workspace.canvasy(0)
    newX = winX - self.dragInfo["xCoord"]
    newY = winY - self.dragInfo["yCoord"]
    self.workspace.move(self.dragInfo["Widget"], newX, newY)

Run Code Online (Sandbox Code Playgroud)

DragInfo 是我用来存储数据的字典。最初我认为将画布坐标转换为窗口坐标会有所帮助，但它的作用与没有这些东西时相同。

python drag-and-drop tkinter tkinter-canvas

use*_*990

2016 06-27

3
推荐指数

1
解决办法

2万
查看次数

在 javafx 中拖放 vbox 元素并显示快照

我想在 vbox 中拖动一个元素作为父元素，并在拖放元素期间显示节点移动，如何通过最轻微的更改来做到这一点。

drag-and-drop javafx-2

Ami*_*avi

2014 03-29

3
推荐指数

1
解决办法

4254
查看次数

在嵌套元素中进行拖动操作时，光标发生令人不快的变化

正如您在这个实例中看到的：http://jsfiddle.net/VU328/div.outer当我们每次鼠标经过时div.inner，甚至当它超出可拖动框时（即进入区域内）时，我们都会尝试body拖动主要可拖动元素（）) 光标快速变为不允许并立即变回正常移动。

有一个标记来显示嵌套情况：

<div class='outer' draggable='true' >
    <div class='inner' >
        abc
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

这是允许默认拖动效果的最小 Javascript 代码：

$(document.body).bind('dragover', function(e) {
    e.preventDefault();
});

Run Code Online (Sandbox Code Playgroud)

光标移动样机

它至少发生在 Windows 和 Chrome (36.0.1985.125 m) 和 IE (11.0.9600.17207) 中。

是否有任何适用于 html5 本机拖动 API 的“标准”修复？（即不使用某些图像替换光标或div.outer用另一个图像覆盖div或使用 jquery-ui 或类似的库）

html internet-explorer drag-and-drop google-chrome

el_*_*yan

2014 08-06

3
推荐指数

1
解决办法

2055
查看次数

样式拖鬼元素

我正面临一个问题，我正在拖动一个 div。

虽然幽灵元素在 MacOs 上看起来不错（在 Chrome 和 FireFox 上都是如此），但在 Windows 中似乎太透明了（在 Chrome 和 FireFox 上都是如此。我尝试了多种方法，但似乎没有任何效果。所以是否可以设置样式幽灵元素？

此外，我尝试在旅途中制作该元素的图像，并将其用作幽灵拖动图像，但透明度问题仍然存在。

html javascript css drag-and-drop html5-draggable

ish*_*ava

lucky-day

3
推荐指数

1
解决办法

3635
查看次数

Angular Material拖放多行列表

我有一份我需要订购的物品清单。为此，我想拖放。

我正在使用 Angular Materials列表解决方案，但我的列表会切换到新行（flex-wrap）当我有多行时，它不会将项目放在它们应该放在的位置。

这是一个例子；https://stackblitz.com/edit/angular-dnd-list-multirow

有谁知道如何使这项工作？

谢谢。

drag-and-drop angular-material angular

met*_*ard

lucky-day

3
推荐指数

1
解决办法

3923
查看次数

使用 React-dnd 看不到我正在拖动的项目

所以基本上，当我使用 html5 后端时一切正常，但由于我的应用程序也将在手机上使用，我需要切换到触摸后端。当我这样做时，一切正常，只是我没有看到我正在拖动的项目。掉落区域接受物品，更改课程和所有内容，但我看不到该死的东西，无论是在 PC 上还是在手机上都看不到。我尝试使用 DragPreviewImage 并且它在切换到 html5backend 但没有触摸时工作。

拖动组件：

const [{isDragging}, drag] = useDrag({
    item: {
        type:ItemTypes.CARD,
        name: props.person,
        id: props.id
    },
    collect: monitor => ({
        isDragging: !!monitor.isDragging(),
      }),
})


return (
    <div
    ref={drag}
    className={`${props.classNameToDisplay} ${isDragging ? 'onDrag' : ""}`}
    id={props.id}
    key={props.person}
    onClick={(e) => props.itemOnClick(e, props.person, props.itemClicked)}>
    {props.person}
</div>
);

Run Code Online (Sandbox Code Playgroud)

删除输入组件：

const DropInput = (props) => {

const[{isOver, canDrop}, drop] = useDrop({
    accept:ItemTypes.CARD,
    canDrop:(item, monitor) => true,
    drop: (item, monitor) => props.itemOnDrop(item,monitor, "regularBet", props.itemClicked),
    collect: monitor => ({
        isOver …

Run Code Online (Sandbox Code Playgroud)

javascript drag-and-drop reactjs react-dnd

Pat*_*n92

lucky-day

3
推荐指数

1
解决办法

1292
查看次数

剧作家拖放

尝试测试一些拖放功能，看起来剧作家没有拖放功能，所以我使用mouse.move(), mouse.down()& mouse.up()。

然而我的尝试似乎失败了，目标没有被移动。代码如下：

test("drag and drop test", async () => {
  await page.goto("https://www.w3schools.com/html/html5_draganddrop.asp");
  await page.waitForSelector("#accept-choices");
  await page.click("#accept-choices");
  await page.waitForSelector("#div1");
  let xStart, yStart, xFinish, yFinish, elementHandle, rect;
  elementHandle = await page.$("#div1");
  rect = await elementHandle.boundingBox();
  xStart = rect.x + rect.width / 2;
  yStart = rect.y + rect.height / 2;
  elementHandle = await page.$("#div2");
  rect = await elementHandle.boundingBox();
  xFinish = rect.x + rect.width / 2;
  yFinish = rect.y + rect.height / 2;
  console.log(`move from (${xStart}, ${yStart}) to …

Run Code Online (Sandbox Code Playgroud)

drag-and-drop node.js playwright

use*_*935

lucky-day

3
推荐指数

2
解决办法

1756
查看次数