将div从一个窗口拖动到另一个窗口

Question

我的窗口有一些可拖动的div。我还有一个我用window.open()创建的第二个窗口，它有可拖动的div。现在可以将div从一个窗口拖到另一个窗口吗？

由于

Answer 1

看看这个tutorial的DnD部分。

为了实现这一点，可以传递发送和接收窗口都可以读取的临时值。它可能是一个cookie，或者更好的想法可能是使用localStorage，因为有些人会自愿阻止cookie以获得更多隐私。

使用Modernizr的后备测试，它可能是这样的：

if (Modernizr.draganddrop) {
    // add drag and drop support
} else {
    // custom drag and drop support or suggest the user to get a real browser (if possible)
}

每当开始拖动时：

if (Modernizr.localstorage) {
    window.localStorage['item_1_drag_started'] = true;
} else {
    document.cookie = "item_1_drag_started=1";
}

然后，当拖动结束/鼠标启动时：

if (Modernizr.localstorage) {
    delete window.localStorage['item_1_drag_started'];
} else {
    document.cookie = "item_1_drag_started=0";
}

现在，当鼠标进入另一个窗口时，您可以通过访问localStorage（或脏cookie（如果它不可用）来检查是否仍在拖动该项目。）

我能想到的唯一问题是当用户在这些窗口之间释放鼠标按钮时。这可能是一个问题，因为该项目将被视为拖动，但您无法释放未按下的按钮。有没有人知道在进入窗口时检查鼠标按钮是否仍然按下的技巧，即使它没有触发事件？

与此同时，接收窗口中的点击事件可以简单地检查它是否仍在拖动然后删除该项并删除该标志。

---

更新：关于提到的问题，在挖掘了一些事情并对事件进行了一些测试后，似乎当鼠标按钮静止时，mouseover或mousemove都不会被触发按下（至少在我的测试已经完成的Chrome中）。

考虑到这一点，我认为在两个窗口之间拖放的最佳方法是切换它：

  Click --> Drag is started

  Click again --> Drop the item

Answer 2

我猜你可以设置变量“drag item = true”并将项目内容存储在某个地方。然后在弹出窗口中将鼠标放在鼠标上。

Answer 3

你可以做的就是拖动，设置一个cookie并将鼠标放在目标窗口上，检查cookie并模拟拖动。

Answer 4

从提供的答案中我可以看到，在窗户之间拖动真的很难看。您必须基本上将鼠标状态从一个窗口传输到另一个窗口，并将被拖动的元素注入到目标窗口的DOM中。我希望周围有一些jQuery你可以在两个窗口中运行，这将平滑所有这些，但我想不是。我不会在这个项目中做拖拽。我可以让用户单击第二个窗口中的元素并立即显示在第一个窗口中。够好了。感谢您查看此问题。