CODEWITHSUNDEEP
iframedrag-and-dropgridster
user3287825
user3287825

Reputation: 31

Drag and Drop Iframe Gridster

I'm loading iframe inside a gridster like this:

<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>

The problem that I have is that I need to drag the element with this iframe inside, but when I do the focus is on the Iframe. How can I drag the Iframe and interact with the Iframe content if I'm not dragging this. The iframe cover completely the li element.

Upvotes: 2

Views: 1843

Answers (2)

jesvin palatty
jesvin palatty

Reputation: 373

Hello I too faced the same issue the above solutions didn't work well for me also it was bit complicated, So for angular calling a callback function start and stop in draggable and resizable object will do the work during invoking each callback function to just make the element hide and unhide respectively.

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

Upvotes: 0

Taebow
Taebow

Reputation: 134

I have the same issue. A solution is explained in this article : http://www.maxmakedesign.co.uk/posts/20-gridster-iframe-breaks-drag-and-drop

Another solution can consist in handling mouseup, mousedown and mousemove events inside the iframe, relaying them via postMessage API, and then triggering them outside on the draggable element.

Upvotes: 3

Related Questions