拖放Iframe Gridster

Question

我将iframe加载到一个网格中，如下所示：

<li data-col="1" id="myElement" data-row="1" data-sizex="2" data-sizey="2" class="gs-w" style="display: list-item;">
    <iframe src="myiframe.html"></iframe>        
</li>

我遇到的问题是，我需要拖动包含此Iframe的元素，但当我这样做时，焦点是在iframe上。如果我没有拖动，我如何拖动Iframe并与Iframe内容交互。iframe完全覆盖了li元素。

Answer 1

我也有同样的问题。本文介绍了一种解决方案：http://www.maxmakedesign.co.uk/posts/20-gridster-iframe-breaks-drag-and-drop

另一种解决方案是在iframe内处理mouseup、mousedown和mousemove事件，通过postMessage API转发它们，然后在draggable元素外部触发它们。

Answer 2

你好，我也面临着同样的问题，上面的解决方案对我来说不是很好，它也有点复杂，所以对于角度调用回调函数，在可拖动和可调整大小的对象中开始和停止将在调用每个回调函数时分别隐藏和取消隐藏元素。

this.options = {
      gridType: GridType.ScrollVertical,
      compactType: CompactType.None,
      margin: 10,
      outerMargin: true,
      outerMarginTop: null,
      outerMarginRight: null,
      outerMarginBottom: null,
      outerMarginLeft: null,
      useTransformPositioning: true,
      mobileBreakpoint: 640,
      minCols: 11,
      maxCols: 100,
      minRows: 8,
      maxRows: 100,
      maxItemCols: 100,
      minItemCols: 1,
      maxItemRows: 100,
      minItemRows: 1,
      maxItemArea: 2500,
      minItemArea: 1,
      defaultItemCols: 1,
      defaultItemRows: 1,
      fixedColWidth: 105,
      fixedRowHeight: 105,
      keepFixedHeightInMobile: false,
      keepFixedWidthInMobile: false,
      scrollSensitivity: 10,
      scrollSpeed: 20,
      enableEmptyCellClick: false,
      enableEmptyCellContextMenu: false,
      enableEmptyCellDrop: false,
      enableEmptyCellDrag: false,
      enableOccupiedCellDrop: false,
      emptyCellDragMaxCols: 50,
      emptyCellDragMaxRows: 50,
      ignoreMarginInRow: false,
      draggable: {
        enabled: true,
        start: (event, $element, widget) => {
          if ((event.id = "iframeElement")) {
            this.elementHidden= true;
          }
        },
        stop: (event, $element, widget) => {
          this.elementHidden= false;
        },
      },
      resizable: {
        enabled: true,
        start: (event, $element, widget) => {
          if ((event.id = "iframeElement")) {
            this.elementHidden= true;
          }
        },
        stop: (event, $element, widget) => {
          this.elementHidden= false;
        },`enter code here`
      },
      swap: false,
      pushItems: true,
      disablePushOnDrag: false,
      disablePushOnResize: false,
      pushDirections: { north: true, east: true, south: true, west: true },
      pushResizeItems: false,
      displayGrid: DisplayGrid.Always,
      disableWindowResize: false,
      disableWarnings: false,
      scrollToNewItems: false,
    };