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中继它们，然后在可拖动元素上触发它们。

Answer 2

您好，我也遇到了同样的问题，上述解决方案对我来说效果不佳，也有点复杂，因此对于可拖动和可调整大小的对象中的 Angular 调用回调函数 start 和 stop 将在调用每个回调函数期间完成工作分别使元素隐藏和取消隐藏。

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,
    };

拖放Iframe Gridster

2 个答案: