2

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

谢谢

4

4 回答 4

2

查看本教程的 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
于 2013-05-29T09:45:25.677 回答
0

您可以做的是拖动，设置cookie并将鼠标悬停在目标窗口上，检查cookie并模拟拖动。

于 2013-05-29T09:07:18.963 回答
0

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

于 2013-05-29T21:15:02.677 回答
0

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

于 2013-05-29T09:01:44.020 回答