Bonjour,

Je joue un peu avec jquery et particulièrement avec dragable et dropable.
Je suis confronté à 2 petits problèmes.
J'ai une div "header" qui a une width de 99% et une div "side avec une width de 10%. Lorsque je drag la div "header" dans la div "side", l'évent drop mis sur la div "side" ne se déclenche pas. (Si je mets une largeur plus petite que 10% sur la div "leader", l'event se déclenche bien!)
1) y-a-t-il une solution pour qu'un event ne se déclenche quand je rentre avec la div "header" dans la zone de la div "side"

2) Mon second soucis est que j'aimerai qd j'ai l'event drop de ma div "side" se déclenche, ma div "header" s'append dans "side" (ça c'est ok) et qu'elle prenne toute la place de "side". Pour le moment, je mets la width et height de "side" sur "header" mais cette dernière se met en position relative

Voici le code de ma page:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <style>
            .div_header{
                background-color: green;
                color:#000000;
                width:99%;
                height:10%;
                clear:both;
                border:solid 1px black;
            }
            .div_footer{
                background-color: red;
                color:#000000;
                width:99%;
                height:10%;
                clear:both;
                border:solid 1px black;
            }
            .div_side{
                background-color: blue;
                color:#000000;
                width:10%;
                height:79%;
                float:left;
                border:solid 1px black;
            }
            .div_content{
                background-color: yellow;
                color:#000000;
                width:79%;
                height:79%;
                float:left;
                border:solid 1px black;
            }
        </style>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <script>
	$(function() {
		$( "#header" ).draggable({
		    snap : true
		});
		$( "#side" ).droppable({
			accept : '#header',
			drop: function( event, ui ) {alert('droped');
				$(this).append(header);
				$(header).width($(this).width());
				$(header).height($(this).height());
				/*$( this )
					.addClass( "ui-state-highlight" )
					.find( "p" )
						.html( "Dropped!" );*/
			}
		});
	});
	</script>
    </head>
    <body>
        <div class="div_header" id="header">
 
        </div>
        <div class="div_side" id="side">
 
        </div>
        <div class="div_content">
 
        </div>
        <div class="div_side">
 
        </div>
        <div class="div_footer">
 
        </div>
    </body>
</html>
Merci de votre aide