drag div avec resize

Version imprimable

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 :roll:

Voici le code de ma page:

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
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

Bonsoir

Je crois que les dimensions relatives doivent être exclues pour du "dropping".

Voici un exemple :

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
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/overcast/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css">
	<style>
		/* TEST */
        .div_header {
            background-color: green;
            color:#000000;
            width:20rem;
            height:10rem;
            clear:both;
            border:solid 1px black;
        }
        .div_footer {
            background-color: red;
            color:#000000;
            width:20rem;
            height:10rem;
            clear:both;
            border:solid 1px black;
        }
        .div_side {
            background-color: blue;
            color:#000000;
            width:10rem;
            height:20rem;
            float:left;
            border:solid 1px black;
        }
        .div_content {
            background-color: yellow;
            color:#000000;
            width:20rem;
            height:20rem;
            float:left;
            border:solid 1px black;
        }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<h2><a href="http://www.developpez.net/forums/d1265684/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/ajouter-contenu-tab/">Lien</a></h2>
	<section class="conteneur">
 
<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>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2012-10-07T22:02:14.253+02:00" pubdate>2012-09-29T23:26:20.190+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/i18n/jquery-ui-i18n.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
	<script src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
	<script>	
"use strict";
 
$(function(){
 
	$( "#header" ).draggable({
	    snap : true
	});
 
	$( "#side" ).droppable({
		accept : '#header',
		drop: function( event, ui ){
			var jObjThis = $( this ),
				jObjHeader = $( "#header" );
 
			alert('droped');
 
			jObjHeader
				.width( jObjThis.width() )
				.css({
					"left" : "0px",
					"top" : "0px"
				});
 
			jObjThis
				.append( jObjHeader )
				.prepend( "<p>Dropped !</p>" );
		}
	});
 
});
 
$(window).load(function(){
 
});
	</script>
</body>  
</html>

08/10/2012, 09h03
bender86

Merci de votre réponse,

la div "header" se met bien correctement dans la "side".
Par contre l'event dropped ne se déclenche que quand le milieu de "header" rentre dans "side". Y-a-il une solution pour que ça se déclenche dès qu'ils ont une partie en contact?

merci
08/10/2012, 11h07
danielhagnoul

Bonjour

Je dirais qu'il ne se déclenche que si la division "header" recouvre la largeur de la division "side".

Normalement, en jouant avec les options snap, snapMode et snapTolerance on arrive à régler le degré de recouvrement nécessaire, mais ici je n'y arrive pas. C'est peut-être dû au fait que la partie "draggable" à une taille supérieure à la partie "droppable".
09/10/2012, 08h57
bender86

Je ne sais pas si c'est une bonne piste pour déclencher l'event dropped

Y-a-t-il un moyen avec l'event stop de connaitre les coordonnées x,y de la div dragée et voir si ces dites coordonnées rentrent dans la div (donc connaitre les x,y de la div qui doit recevori)?

Merci :P