2

我正在像这样在 gridster 中加载 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 元素。

4

2 回答 2

3

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

另一个解决方案包括在 iframe 中处理 mouseup、mousedown 和 mousemove 事件，通过 postMessage API 中继它们，然后在可拖动元素上触发它们。

于 2014-04-01T13:05:52.317 回答
0

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

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,
    };
于 2021-03-09T06:13:30.143 回答