locked
Drop Element In Iframe RRS feed

  • Question

  • User1928065626 posted

    I am able to drag objects into an iframe on my page and this iframe opens another page (in the same domain of course). The droppable area is in this new page which the iframe opens.

    When I drop the dragged objects they get appended to the body of this page inside the iframe. The problem is the objects do not appear at the location where they were dropped.

    Also if after I have dropped multiple items and then I drag one of them to a new location and drop it, it and  all the other dropped items will be shifted to the right.

    I have looked everywhere on the web but I did not find a way to precisely drop my elements inside the iframe. I even posted this question on jQuery UI forum and was pretty much ignored. Please help me solve this problem, thanks.

    Wednesday, October 5, 2016 1:03 PM

All replies

  • User1324658857 posted

    Hi madjester,

    According to your description, I know your problem , but don’t know where not work , could you give me more code , I can test your code and try to find out why .

    Thursday, October 6, 2016 1:19 PM
  • User1928065626 posted

    Hi, thanks for your reply. Please click the link below to see my markup and script. 

    http://gapi555-001-site1.itempurl.com/dragdropiframe2.html

    When the page loads you will see a blue button labeled Icons at the top of the gray box. 

    Hover your mouse over this button and two rectangles will appear (one blue, the other orange).

    Then drag the rectangles into the gray box below them.  After dropping them in the gray box, try to drag and drop them again.

    Thursday, October 6, 2016 1:42 PM
  • User1324658857 posted

    hi ,

    I test your code get by from F12 , but I found a Test.html ,please  post more code for test . include Test.html

    Wednesday, October 12, 2016 11:36 AM
  • User-271186128 posted

    Hi madjester,

    From your description, I suggest you could use the clone() Method to copy the elements and append to the page inside the iframe.

    More details, see: http://www.w3schools.com/jquery/html_clone.asp

    Besides, you could also try to use JQuery UI Draggable Widget to drag elements:

    https://api.jqueryui.com/draggable/

    http://jsfiddle.net/n10ucrLd/

    Best regards,
    Dillion

    Monday, November 7, 2016 10:10 AM