Response title
This is preview!
Drag Drop elements from PARENT to IFRAME
in Using jQuery UI
•
1 year ago
Hi everyone,
I am developing a project and i'm stuck in a situation. I am using JQUERY UI with Draggable n DroppabIe and i need to DRAG an element from a page and DROP it in another page in IFRAME. I am successful to some extent. But there is a real problem.
On the DROP event i am displaying ALERT. Now, when i drop the element from Parent page to the DROPPABLE element in IFRAME, it is not getting DRPPED in its proper place.The problem is that the landing zone for the drop area is not where it is displayed on the screen. That is, the alert is fired when the draggable is dropped somewhere above the drop target, and not on the target itself. A few tests I did suggest that the difference between where the target is on screen and where jQuery thinks it is is related to the vertical position of the iframe on the page, but I can't find a direct correlation.
here is the code i am using:
On PARENT PAGE:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="language" content="en" />
<link rel="stylesheet" href="../jqueryui/development-bundle/themes/base/jquery.ui.all.css">
<script src="../jqueryui/development-bundle/jquery-1.4.4.js"></script>
<script src="../jqueryui/development-bundle/ui/jquery.ui.core.js"></script>
<script src="../jqueryui/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="../jqueryui/development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="../jqueryui/development-bundle/ui/jquery.ui.draggable.js"></script>
<script src="../jqueryui/development-bundle/ui/jquery.ui.droppable.js"></script>
<link rel="stylesheet" href="../jqueryui/development-bundle/demos/demos.css">
<style>
#draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
#droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script language="javascript">
$(document).ready(function() {
$( "#draggable").draggable({
iframeFix: true,
helper: 'clone',
refreshPositions: true
});
$('#frame1').load( function(){
$(this.contentDocument).find('#droppable').droppable
({
tolerance: 'fit',
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function(event, ui) {
$(this)
.addClass( "ui-state-highlight" )
alert ('Drooped');
}
})
})
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div>hgfhjgkjhkl</div>
<iframe id="frame1" height="400" width="300" src="test_with_iframe.php"></iframe>
</body>
</html>
ON the page in IFRAME
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="language" content="en" />
<style>
#droppable { width: 230px; height: 120px; border:1px solid #000; }
</style>
</head>
<body>
<div class="demo">
<div id="droppable" class="ui-widget-header">
<p>Outer droppable</p>
</div>
</div>
<!-- End demo -->
<div class="demo-description">
<p>When working with nested droppables — for example, you may have an editable directory structure displayed as a tree, with folder and document nodes — the <code>greedy</code> option set to true prevents event propagation when a draggable is dropped on a child node (droppable).</p>
</div><!-- End demo-description -->
</body>
</html>
Please Help me out as soon as possible. I would really appreciate any kind of help. I really need this issue fixed as soon as possible.
Regards
Sam
I am developing a project and i'm stuck in a situation. I am using JQUERY UI with Draggable n DroppabIe and i need to DRAG an element from a page and DROP it in another page in IFRAME. I am successful to some extent. But there is a real problem.
On the DROP event i am displaying ALERT. Now, when i drop the element from Parent page to the DROPPABLE element in IFRAME, it is not getting DRPPED in its proper place.The problem is that the landing zone for the drop area is not where it is displayed on the screen. That is, the alert is fired when the draggable is dropped somewhere above the drop target, and not on the target itself. A few tests I did suggest that the difference between where the target is on screen and where jQuery thinks it is is related to the vertical position of the iframe on the page, but I can't find a direct correlation.
here is the code i am using:
On PARENT PAGE:
<html xmlns="http://www.w3.org/1999/
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="language" content="en" />
<link rel="stylesheet" href="../jqueryui/development-
<script src="../jqueryui/development-
<script src="../jqueryui/development-
<script src="../jqueryui/development-
<script src="../jqueryui/development-
<script src="../jqueryui/development-
<script src="../jqueryui/development-
<link rel="stylesheet" href="../jqueryui/development-
<style>
#draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
#droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script language="javascript">
$(document).ready(function() {
$( "#draggable").draggable({
iframeFix: true,
helper: 'clone',
refreshPositions: true
});
$('#frame1').load( function(){
$(this.contentDocument).find('
({
tolerance: 'fit',
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function(event, ui) {
$(this)
.addClass( "ui-state-highlight" )
alert ('Drooped');
}
})
})
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div>hgfhjgkjhkl</div>
<iframe id="frame1" height="400" width="300" src="test_with_iframe.php"></
</body>
</html>
ON the page in IFRAME
<html xmlns="http://www.w3.org/1999/
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="language" content="en" />
<style>
#droppable { width: 230px; height: 120px; border:1px solid #000; }
</style>
</head>
<body>
<div class="demo">
<div id="droppable" class="ui-widget-header">
<p>Outer droppable</p>
</div>
</div>
<!-- End demo -->
<div class="demo-description">
<p>When working with nested droppables — for example, you may have an editable directory structure displayed as a tree, with folder and document nodes — the <code>greedy</code> option set to true prevents event propagation when a draggable is dropped on a child node (droppable).</p>
</div><!-- End demo-description -->
</body>
</html>
Please Help me out as soon as possible. I would really appreciate any kind of help. I really need this issue fixed as soon as possible.
Regards
Sam
2
