I’m trying to use jQuery UI’s sortable to make list items in a browser popup window (i.e., window.open(), not some kind of modal) sortable.
Basically:
popup = window.open("", "_blank").document.body;
list = popup.appendChild(...);
$(list).sortable();
However, it seems like the positioning calculations within jQuery UI are getting messed up.
Dragging things around doesn’t show fluid movement—nothing seems to happen, but clicking around enough will move elements all over the page (they’re stuck with position: absolute styles).
Running jQuery UI sortable on the same styling/markup within the popup window itself works fine, so it seems like the issue stems from jQuery on the parent window trying to calculation positions in the child window’s DOM.
Passing a container on the child DOM to jQuery UI sortable’s containment option doesn’t help.
Is there some way I can tell the parent window jQuery that it needs to be doing all of its calculations with respect to the child window’s document?
I would probably elect to bypass the problem, and simply create a blank document that includes a container and JS wrappers for any functions that you wish to call from the parent — instead of opening a completely blank document, open a principally empty document that contains any necessary functions in built as well as its own references to the jQuery libraries, but which accepts function calls from the parent to populate it (eg, popup.FunctionName(var) and so forth). If the child needs to communicate with the parent, you can perform it in the same way basically.
That way, you simply void any of the problems that you get with jQuery getting fuzzy over the scope of its actions by isolating the jQuery calls, essentially only ever calling them within the window that they are supposed to be affecting.