两个iframe之间的JavaScript/jQuery拖放元素 [英] JavaScript/jQuery drag and drop element between two iframes

问题描述

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

I have a page with 2 iframes, side by side, both from the same domain. I want to drag'n'drop an element from a specific drag-zone (e.g. a table) of one iframe to a specific dropzone (e.g. a list) on the other. I checked all related questions on stackoverflow and elsewhere, but I can't find an appropriate solution. I tried it with jQuery UI draggable, but the problem is that the returned draggable element is contained within the iframe. I cannot drag it out of the iframe boundaries. So, my next thought was to create the draggable element on top (parent) window, but then I guess I'd have to somehow trigger a drag event on the parent window from the dragstart event on the iframe. But then, how would I detect the drop event when I mouse over the appropriate elements on the drop-frame?

哦，如果还不够困难，我也想在IE8上使用它:) 但就目前而言，我们只能说我将找到一个不涉及拖放的IE8后备解决方案.

Oh, and if that's not hard enough already, I'd like to make it work on IE8 too :) But for now, let's just say that I will find a fallback solution for IE8 that will not involve drag'n'drop.

推荐答案

您可以通过将鼠标消息从iframe发送到父级并在父级中进行拖动来模拟拖动.这是一个代码笔，显示了将列表项从一帧拖动到另一帧: http://codepen.io/brenzy/详细信息/zxMZmO/

You can simulate dragging by sending mouse messages from the iframes to the parent, and doing the drag in the parent. Here is a codepen showing dragging list items from one frame to another: http://codepen.io/brenzy/details/zxMZmO/

由于SO需要一些代码，因此以下是dragHandler与父级对话:

Since SO wants some code, here is the dragHandler talking to the parent:

$("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中使用，但是我很确定您可以在其他浏览器中使用它.

NOTE: This only works in Chrome, but I am pretty sure that you can get it working in other browsers.

这篇关于两个iframe之间的JavaScript/jQuery拖放元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！