Déplacer et Redimentioner des div avec enregistrements des positions dans une BD

**MisterShadows** · 11/10/2011, 11h15

Bonjour,
j'ai fais une bidouille pour gérer des mises en pages automatique et enregistrer la position et la taille des div en jquery. Mon code semble un peu lourd si je devais avoir 15 div. Quelqu'un pourrait-il alléger cette proposition ?

Merci d'avance.
CHAD

---------------------

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 
 
      <style> 
         #div1{width: 80px; height: 200px; float: left;background-color: white; border: 1px solid #999; }
         #div2{width: 180px; height: 200px; top:120px; float: left;background-color: white; border: 1px solid #999;}
         #conteneur{width: 800px; height: 600px; border: solid 1px #999;}
		 .ui-resizable-helper { border: 2px dotted red; }
 
      </style>
   </head> 
   <body> 
 
   <?php
   print_r($_POST);
   ?>
      <div id="conteneur"> 
         <div id="div1"></div> 
         <div id="div2"></div> 
      </div> 
 
   <script>
$(function(){
            $('#div1').resizable({
				helper: "ui-resizable-helper",
				containment: "#conteneur",
				resize: function(event,ui){
				var h1 = $("#div1").height();
				var w1 = $("#div1").width();
				$('#h1').attr({value : h1});
				$('#l1').attr({value : w1});
				$('#pl1').attr({value : ui.position.left});
				$('#pt1').attr({value : ui.position.top});			              }
            });
           $('#div1').draggable({
             containment: "#conteneur",
			 drag: function(event,ui){
				var h1 = $("#div1").height();
				var w1 = $("#div1").width();
				$('#h1').attr({value : h1});
				$('#l1').attr({value : w1});
				$('#pl1').attr({value : ui.position.left});
				$('#pt1').attr({value : ui.position.top});
			 }
           });
 
 
            $('#div2').resizable({
				helper: "ui-resizable-helper",
				containment: "#conteneur",
				resize: function(event,ui){
				var h1 = $("#div2").height();
				var w1 = $("#div2").width();
				$('#h2').attr({value : h1});
				$('#l2').attr({value : w1});
				$('#pl2').attr({value : ui.position.left});
				$('#pt2').attr({value : ui.position.top});			              }
            });
           $('#div2').draggable({
				containment: "#conteneur",
				drag: function(event,ui){
				var h1 = $("#div2").height();
				var w1 = $("#div2").width();
				$('#h2').attr({value : h1});
				$('#l2').attr({value : w1});
				$('#pl2').attr({value : ui.position.left});
				$('#pt2').attr({value : ui.position.top});
			 }
           });
 
 
         });
</script>
 
 
<form method="post" action="#">
 
	<input type="hidden" name="h1" id='h1' value=""/>
	<input type="hidden" name="l1" id='l1' value=""/>
	<input type="hidden" name="pl1" id='pl1' value=""/>
	<input type="hidden" name="pt1" id='pt1' value=""/>
	<input type="hidden" name="h2" id='h2' value=""/>
	<input type="hidden" name="l2" id='l2' value=""/>
	<input type="hidden" name="pl2" id='pl2' value=""/>
	<input type="hidden" name="pt2" id='pt2' value=""/>
 
	<input type="submit" value="Envoyer" />
</form>
</body>
</html>

**danielhagnoul** · 12/10/2011, 01h05

Bonsoir

Exemple :

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
var position = function(height, width, left, top, id1, id2, id3, id4){
	$('#'+id1).val(height);
	$('#'+id2).val(width);
	$('#'+id3).val(left);
	$('#'+id4).val(top);
};
 
$("#div1").resizable({
	helper: "ui-resizable-helper",
	containment: "#container",
	stop: function(event,ui){
		position($(this).height(), $(this).width(), ui.position.left, ui.position.top, "h1", "l1", "pl1", "pt1");
	}
}).draggable({
	containment: "#container",
	stop: function(event,ui){
		position($(this).height(), $(this).width(), ui.position.left, ui.position.top, "h1", "l1", "pl1", "pt1");
	}
});
 
 
$('#div2').resizable({
	helper: "ui-resizable-helper",
	containment: "#container",
	stop: function(event,ui){
		position($(this).height(), $(this).width(), ui.position.left, ui.position.top, "h2", "l2", "pl2", "pt2");
	}
}).draggable({
	containment: "#container",
	stop: function(event,ui){
		position($(this).height(), $(this).width(), ui.position.left, ui.position.top, "h2", "l2", "pl2", "pt2");
	}
});

L'événement stop ne se produit qu'une seule fois, à la fin de l'action, il est donc plus économe que drag ou à resize.

**MisterShadows** · 12/10/2011, 09h39

Merci pour ce résumé de code.

Déplacer et Redimentioner des div avec enregistrements des positions dans une BD

jQuery

Discussions similaires

Partager

Partager