Drag&Drop : Zone de Drop décallée

Bonjour tout le monde,
Je poste ce sujet car je n'ai trouvé nul part (sur Developpez & Google) une réponse à mon problème.
J'essaye de mettre en place un D&D entre deux iFrames avec JQuery.
J'ai d'abord commencé par réalisé un D&D entre une iFrame et son parent pour plus de simplicité.
Lorsque je drag&drop l'un des div "draggable" dans un div "droppable", le second prend la même couleur de fond que le premier.
Mais inexplicablement, la zone de drop de mes div s'est déplacé vers le haut de la page (cf : Image) :

http://img844.imageshack.us/img844/4457/dropzone.png

J'espère que vous serez en mesure de m'aider sur ce problème.
Je vous remercie d'avance pour votre aide.
Voici mon code :

default.htm

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html><head>
    <title>jQuery UI Draggable</title>
    <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
 
    <script type="text/javascript">
        $(function ()
        {
            //Cursor : changer du curseur
            //Revert : retour du drag à son origine
            //iFrame : Permet de placer le drag au dessus des iFrames
            $("#FirstDiv").draggable({ cursor: "crosshair", opacity: 0.75, revert: true, iframeFix: true });
            $("#SecondDiv").draggable({ cursor: "crosshair", opacity: 0.75, revert: true, iframeFix: true });
            $("#Frame_Drop").load(function ()
            {
                var $this = $(this);
                var contents = $this.contents();
                // here, catch the droppable div and create a droppable widget
                contents.find('.DroppableDiv').droppable(
                {
                    tolerance: "pointer",
                    iframeFix: true,
                    drop: function (event, ui)
                    {
                        var drag = $(ui.draggable[0]);
                        var drop = $(this);
                        $(drop).css({ opacity: 1.0 });
                        $(drop).css("background-color", $(drag).css("background-color"));
                    }
                });
            });
        });
    </script>
</head>
<body>
<div class="demo">
<div id="mainDiv" style="background-color: #40A497; height:220px">
<div id="FirstDiv" style=" background-color: #007667; border-style:solid; border-width:1px; font-size:medium; height:100px; width:100px"></div>
<div id="SecondDiv" style=" background-color: #00F4D4; border-style:solid; border-width:1px; font-size:medium; height:100px; width:100px"></div>
</div>
</div>
<iframe id="Frame_Drop" src="Frame_Drop.htm" style="width: 1400px; height: 800px"></iframe>
</body>
</html>

Frame_Drop.htm

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
    <style>
        .DroppableDiv
        {
            float : left;
            border-style:solid;
            border-width:1px;
            background-color: Gray;
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <div id="Drop1" class="DroppableDiv">
    </div>
    <div id="Drop2" class="DroppableDiv">
    </div>
    <div id="Div1" class="DroppableDiv">
    </div>
    <H1>Drop</H1>
</body>
</html>