CODEWITHSUNDEEP
jqueryiframedrag-and-dropdraggabledroppable
Nirmal Ram
Nirmal Ram

Reputation: 1732

jQuery ui draggable drop into an iframe

I am trying to use jQuery ui draggable and droppable and it works fine if i try on the same page. But when I try to drag an element and drop into the droppable area defined in the iframe then it doesn't work perfectly. It works but not on whole droppable area in the iframe and its also droppable outside the frame.

Here is what i did

My main page : Home.html

<!DOCTYPE html>
<html><head>
    <title>jQuery UI Draggable</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <link href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet">

    <script type="text/javascript">
        $(function () {
            $("#FirstDiv").draggable({ revert: "invalid",iframeFix: true });
            $("#SecondDiv").draggable({ revert: "invalid" });
            $("#frame").load(function () {
                var $this = $(this);
                var contents = $this.contents();
                contents.find('.DroppableDiv').droppable({
                    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>
<iframe id="frame" src="test.html" style="width: 800px; height: 400px"></iframe>

</body></html>

And here is my iframe content test.html

<!DOCTYPE html>
<html>
<head>
    <title>jQuery UI Draggable - inner html</title>
    <style>
     .DroppableDiv {
        background-color:red;
        height: 500px;
        width: 500px;
     }
    </style>
</head>
<body style="cursor: auto;">
    <div class="DroppableDiv">
    </div> 
</body>
</html>

Upvotes: 4

Views: 4535

Answers (1)

tinthetub
tinthetub

Reputation: 2196

You could try something like:

$('#draggables div', parent).draggable();

There also a few different answers here:

https://web.archive.org/web/20170426075018/http://jqfaq.com/how-to-implement-drag-and-drop-between-iframes/

jQuery and iframes and weird positioning: is there a workaround?

Good Luck!

Upvotes: 0

Related Questions