Welcome Guest. Sign in or Signup

10 Comments

How to implement drag and drop between iframes?

Asked by: 32676 views User Interaction

+1
0

jQuery drag and drop can be implemented between iframes on the same page. But, for this, the content for both the frames should come from the same domain, for security reasons.

Inner Frame Content
Consider this the source for the inner frame with a “DroppableDiv” inside which we want to enable drop:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery UI Draggable - inner html</title>
   <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
	<script src="http://jqueryui.com/jquery-1.7.2.js"></script>
	<script src ="http://jqueryui.com/ui/jquery.ui.core.js"></script>
	<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
	<script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
	<script src="http://jqueryui.com/ui/jquery.ui.draggable.js"></script>
	<script src="http://jqueryui.com/ui/jquery.ui.droppable.js"></script>
	<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
    <style>
        .DroppableDiv
        {
            background-color: Gray;
            height: 500px;
            width: 500px;
        }
    </style>
</head>
<body style="cursor: auto;">
    <div class="DroppableDiv">
    </div>
</body>
</html>

Outer Page Content
This is how the code should look like in the outer html page that contains the frame referencing the above page. Note that this works only if both the pages are from the same source domain.

<!DOCTYPE html>
<html><head>
	<title>jQuery UI Draggable</title>
	<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
	<script type="text/javascript" src="http://jqueryui.com/jquery-1.7.2.js"></script>
	<script type="text/javascript" src ="http://jqueryui.com/ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.draggable.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.droppable.js"></script>
	<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
	
	<script type="text/javascript">
	    $(function () {
	        $("#FirstDiv").draggable({ revert: "invalid",iframeFix: true, });
	        $("#SecondDiv").draggable({ revert: "invalid", iframeFix: true,});
	        $("#frame").load(function () {
	            var $this = $(this);
	            var contents = $this.contents();
                // here, catch the droppable div and create a droppable widget
	            contents.find('.DroppableDiv').droppable({
	                iframeFix: true,
	                drop: function (event, ui) { alert('dropped'); }
	            });
	        });
	    });
	</script>
</head>
<body style="cursor: auto;" >

<div class="demo">
<div id="mainDiv" style="background-color: #FAE6B6; height:200px">
<div id="FirstDiv" style=" border-style:solid; border-width:1px; font-size:medium; height:20px; width:300px">First Div</div>
<div id="SecondDiv" style=" border-style:solid; border-width:1px; font-size:medium; height:20px; width:300px">Second Div</div>
</div>
</div>
<!-- While testing this code in a VS.NET project, first run the inner frame page in your local host, 
copy that url which would be of the form below, paste it in the containing frame and then 
run the containing frame.-->
<iframe id="frame" src="http://localhost:59262/Samples/IframeDAndDTest_InnerFrameContent.htm" style="width: 800px; height: 400px"></iframe>

</body></html>

10 Comments



  1. jagatjit mohapatra on Jul 24, 2012 Reply

    it is very interesting and i found this place after long search of 3 days.

    But i am interested to know why this is not working if the size if the droppable div becomes less than 400px.

    Thanks in advance.



  2. jagatjit mohapatra on Jul 24, 2012 Reply

    The example provided is very helpful.

    I wonder why is this not working if the size of the droppable div becomes less that 400px;

    Thanks in advance.



  3. balaKrishnan on Jul 27, 2012 Reply

    This is because the mainDiv has a height of 200px. You can adjust this to allow droppable divs < 400pxs.

    This is how the mainDiv is defined:

    <div id=”mainDiv” style=”background-color: #FAE6B6; height:100px” >



  4. Kalim on Jun 05, 2013 Reply

    I tried this example but not working in my case. command not going inside

    contents.find(‘.DroppableDiv’).droppable({
    iframeFix: true,
    drop: function (event, ui) { alert(‘dropped’); }
    });

    please help



  5. gucci outlet handbags gucci on Dec 05, 2013 Reply

    It’s wonderful that you are getting ideas from this piece of writing as well as from our argument made at this time.



  6. Sam Foo on Feb 21, 2014 Reply

    I just want to say I’m beginner to weblog and absolutely enjoyed you’re website. Very likely I’m planning to bookmark your blog post . You actually have wonderful stories. Bless you for sharing with us your blog.



  7. Hipolito M. Wiseman on Apr 16, 2014 Reply

    I simply want to mention I’m newbie to blogs and actually savored your website. More than likely I’m planning to bookmark your blog . You really have impressive articles. Regards for sharing your blog.



  8. pop over to these guys on Sep 19, 2014 Reply

    I just want to mention I’m very new to blogging and site-building and definitely liked you’re page. Likely I’m going to bookmark your blog . You actually come with great writings. Thanks a bunch for sharing with us your web-site.



  9. more info here on Nov 10, 2014 Reply

    I simply want to say I’m beginner to blogging and honestly loved your web page. Almost certainly I’m planning to bookmark your website . You certainly come with exceptional writings. Thanks for sharing with us your blog site.


Comments on Question