Response title
This is preview!
Drag and Drop in Frameset.
in Using jQuery UI
•
7 years ago
Hi EveryOne.
I have frameset and I need to drag a div from frame1 to frame2.
Please suggest.
The following is my sample code.
---------CODE-----
Maint.html
<frameset cols="40%,40%" frameborder="0" border="0" framespacing="0">
<frame id="frame1" width="350" height="700" src="page1.html" frameborder="0" style="z-index:100;"></frame>
<frame id="frame2" width="350" height="700" src="page2.html" frameborder="0" style="z-index:-100;"></frame>
</frameset>
--------Page1.html--------
<script type="text/javascript">
$(function () {
$("#FirstDiv").draggable({ revert: "invalid",iframeFix: false, });
$("#SecondDiv").draggable({ revert: "invalid", iframeFix: false,});
console.log("0000000 = ");
$("#frame2").load(function () {
console.log();
var $this = $(this);
var contents = $this.contents();
console.log("contents = "+contents);
// here, catch the droppable div and create a droppable widget
contents.find('.DroppableDiv').droppable({
iframeFix: true,
drop: function (event, ui) { alert('dropped'); }
});
});
});
</script>
<body style="cursor: auto;" >
PAGE 1
<div class="demo">
<div id="mainDiv" style="z-index:900;background-color: #FAE6B6; height:200px">
<div id="FirstDiv" style=" z-index:1000;border-style:solid; border-width:1px; font-size:medium; height:20px; width:300px">First Div</div>
<div id="SecondDiv" style=" z-index:1000;border-style:solid; border-width:1px; font-size:medium; height:20px; width:300px">Second Div</div>
</div>
</div>
-------Page2.html--------
<script type="text/javascript">
$(function () {
console.log("!!!!!!!!!!!!!!! = ");
var $this = $(this);
var contents = $this.contents();
console.log("contents = "+contents);
// here, catch the droppable div and create a droppable widget
contents.find('.DroppableDiv').droppable({
iframeFix: true,
drop: function (event, ui) { alert('dropped'); }
});
});
</script>
<style>
.DroppableDiv
{
background-color: Gray;
height: 500px;
width: 500px;
}
</style>
</head>
<body style="cursor: auto;">
<div class="DroppableDiv">
</div>
</body>
1