我有一个包含 2 个 iframe 的页面,它们并排来自同一个域。我想将一个元素从一个 iframe 的特定拖放区(例如表格)拖放到另一个 iframe 的特定拖放区(例如列表)。我检查了 stackoverflow 和其他地方的所有相关问题,但找不到合适的解决方案。我尝试使用 jQuery UI 可拖动,但问题是返回的可拖动元素包含在 iframe 中。我无法将其拖出 iframe 边界。所以,我的下一个想法是在顶部(父)窗口上创建可拖动元素,但后来我想我必须以某种方式从 iframe 上的 dragstart 事件触发父窗口上的拖动事件。但是,当我将鼠标悬停在下拉框上的相应元素上时,我该如何检测拖放事件?
哦,如果这还不够难的话,我也想让它在 IE8 上工作:) 但就目前而言,我们只说我会为 IE8 找到一个不涉及拖放的后备解决方案。
最佳答案
您可以通过从 iframe 向父级发送鼠标消息并在父级中进行拖动来模拟拖动。这是一个代码笔,显示将列表项从一个框架拖到另一个框架:http://codepen.io/brenzy/details/zxMZmO/
由于 SO 需要一些代码,这里是 dragHandler 与父级对话:
$("li").mousedown(function (event) {
dragElement = $(this);
if(event.stopPropagation) event.stopPropagation();
if(event.preventDefault) event.preventDefault();
event.cancelBubble=true;
event.returnValue=false;
return false;
});
$(document).mousemove(function (event) {
if (dragElement) {
if (!dragStarted) {
// tell the parent to start dragging the item
parent.postMessage({
action: "dragStart", frame: myId,
itemText: dragElement.text(), itemId: dragElement.attr('id'),
offset: {left: event.pageX, top: event.pageY}
}, '*');
dragStarted = true;
} else {
parent.postMessage({action: "dragMove", frame: myId,
offset: {left: event.pageX, top: event.pageY}}, '*');
}
}
});
$(document).mouseup(function (event) {
if (dragStarted) {
parent.postMessage({
action: "cancelDrag", frame: myId,
itemText: dragElement.text(), itemId: dragElement.attr('id'),
offset: {left: event.pageX, top: event.pageY}
}, '*');
}
dragStarted = false;
dragElement = null;
});
注意:这仅适用于 Chrome,但我很确定您可以在其他浏览器中使用它。
关于JavaScript/jQuery 在两个 iframe 之间拖放元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28879784/