interact in an iFrame #97

Closed
alexiskattan opened this Issue Nov 8, 2014 · 9 comments

Projects

None yet

3 participants

@alexiskattan

First off, I absolutley love this library. It is really well done and I find it really useful.

I can get interact to work fine under normal conditions. Now, I'm trying to activate interact from a parent frame. Here is the code:

$("#my_iFrame")[0].contentWindow.interact('.draggable').draggable({
    onmove: function (event) {
        var target = event.target, x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
        target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
    }
})

I'm really stumped as to what could be causing the issue. If you have any ideas, let me know!

@taye
Owner
taye commented Nov 8, 2014

I didn't develop interact.js with iFrames in mind but it would make a lot of sense to change that. A similar issue was opened before but I had been too busy working on multiple interactions to really look into it. Now I should have time to try to get this done.

So what you want is to be able to use the interact object of a child frame to work with elements in the parent window? It might be possible with selector contexts. I'll try a few things and let you know how it goes.

@taye
Owner
taye commented Nov 8, 2014

It looks like because the two frames have different Object objects, the isObject(thing) check that I use for checking draggable options always fails. I'll do some things...

@alexiskattan

Thank you so much. I really love everything about this library. It is sooo good. The inertia is especially beautiful.

Yes I'll explain more about the use case I'm trying to do. More or less I'm creating a wysiwyg editor. I have one page that has many divs, images, and text. Then I'm making an "editor" that loads this page with divs, images, and text in an iFrame. Then the editor is trying to reach into the iframe to invoke your interact library. We have control over both the editor and child page so it is not a problem to load the interact.js library where needed.

Thanks again and let me know if I can help provide any more details about the use case or other assistance.

@alexiskattan alexiskattan changed the title from interact in an iFrme to interact in an iFrame Nov 8, 2014
@alexiskattan

Hi again. I re-read your comment. I want to clarify, just in case, I'm to interact with the child using the parent object. I tried interact('#element_in_child_iframe', { context: $("#child_iframe")[0].contentDocument }) from the parent object, but nothing happened.

@alexiskattan

It works!!! :D Plugged it in and it worked on the first time. Thank you so much.

@taye
Owner
taye commented Nov 9, 2014

Hey. Thanks, that cleared things up perfectly.

I've done some work which should now make dragging accross accessible frames work in any direction (either the parent or child frame can own interact). Here's a demo and you can download the updated interact.js here.

Using that file, the code that you wrote above should work. With selector Interactables, you need the context setting. However, If you're passing an element directly like

interact(document.getElementById('target')).draggable(...)

then giving the context isn't necessary. There are still a few things to do – cross-frame dropzones don't work, there are coordinate inconsistencies between Firefox and Chrome – and probably some other bugs.

Hehe. I was about 3 seconds from posing this before I saw your comment.

@73rhodes
Contributor

Great library! It seems like cross-frame dropzones almost work, but the coordinates are off, especially when the iframe is scrolled. Any plans to revisit this one?

@taye
Owner
taye commented Jul 16, 2015

@73rhodes Yes, but I doubt that I'll be able to do it in within the next two months. It will have to be after #231 is merged.

@taye
Owner
taye commented Nov 21, 2015

Because interact.js no longer calls preventDefault on mousedown events by default, the offset coordinates doesn't happen if you start dragging in a child frame and move outside the frame's borders and over it's parents. The problem still exists on Firefox when you move from a parent over a child frame. A fix for that would be to cover the child iframe with a transparent element.

I'm closing this issue and leaving #77 - "Drag & Drop between frames" open.

@taye taye closed this Nov 21, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment