两个iframe之间的JavaScript/jQuery拖放元素

Question

我有一个页面,其中有2个iframe,并排,来自同一个域.我想将一个元素从一个iframe的特定拖动区域(例如一个表格)拖放到另一个iframe的特定拖放区域(例如列表).我检查了stackoverflow和其他地方的所有相关问题,但我找不到合适的解决方案.我尝试使用jQuery UI draggable,但问题是返回的draggable元素包含在iframe中.我无法将其拖出iframe边界.所以,我的下一个想法是在顶部(父)窗口上创建可拖动元素,但是我想我必须以某种方式从iframe上的dragstart事件触发父窗口上的拖动事件.但是,当我将鼠标悬停在丢帧上的相应元素上时,如何检测掉落事件？

哦,如果这已经不够了,我也想让它在IE8上工作:)但是现在,我只想说我会找到一个不涉及拖放的IE8的后备解决方案.

Answer 1

您可以通过将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,但我很确定您可以在其他浏览器中使用它.