14

I am trying to drag-drop elements between parent frame and iframe using jQuery. I have a panel in parent frame which contains some draggable items which can be dropped on the child frame. I tried to search a lot but couldn't find much...

I tried to work around it by appending the element inside the child frame and then trying to trigger draggable on the newly inserted element programmatically, but I got stuck there as well. Couldn't find the proper way to trigger the drag function. (The draggable element has a helper. When I trigger drag by triggering "mousedown.draggable" the position on the ui-draggable element changes but I cannot see the helper.

Thanks!!

Kshitiz
  • 2,852
  • 5
  • 32
  • 41

2 Answers2

5

AFAIK, if iframes come from different domains, this is not doable in a "common" way (unless you control both iframes), browser security measures prevent it, otherwise you could wrap a banking website and steal passwords, for example, when you log in.

Some info on workarounds: http://softwareas.com/cross-domain-communication-with-iframes

If you control both iframes:

Drag & Drop between iframes by sample: http://www.dhtmlx.com/docs/products/dhtmlxTree/samples/05_drag_n_drop/06_pro_drag_frame.html

Cross Browser HTML5 Drag and Drop: http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/

Another sample: http://jqfaq.com/how-to-implement-drag-and-drop-between-iframes/

Marcos Besteiro López
  • 1,452
  • 8
  • 15
  • hey.. thanks a lot.. I left the drag and drop for the time being... but as far as I read through your links.. it was exactly what I was looking for... (yeah I have control over both frames) – Kshitiz Feb 08 '13 at 11:04
  • Hey.. I figured out how to do that just using jQuery... drag|drop|and ConnectToSortable ... will post my answer once I perfect it... – Kshitiz Feb 21 '13 at 21:09
-5

Irrespective of the structure of frames, one can always use Robot class to drag and drop elements across them. I am providing a sample code just in case:

//Setting up chrome driver
WebDriverManager.getInstance(CHROME).setup();
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();

//Redirecting to the website
driver.get("https://codepen.io/rjsmer/full/vvewWp");

Robot robot = new Robot();
robot.mouseMove(x-coordinate1, y-coordinate1);
robot.mousePress(InputEvent.BUTTON1_DOWN_MASK);

Thread.sleep(2000);
robot.mouseMove(x-coordinate2, y-coordinate2);

Thread.sleep(2000);
robot.mouseRelease(InputEvent.BUTTON1_DOWN_MASK);
Satya
  • 576
  • 1
  • 6
  • 12