Drag and Drop in Frameset.

Drag and Drop in Frameset.

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>