11548 sujets

JavaScript, DOM et API Web HTML5

Création et déplacement de div en temps réel

Bonjour a tous,

Pour répondre au besoin d'un amie, j'aimerais lui permetre de créer des divs à la souris dans sa page de galerie photo. Une fois la div créée, il faudrai qu'elle puisse la placer ou elle veut, et enfin, qu'elle y applique la photo voulu. De cette manière, elle pourra positionner les miniatures de ces photos de manière original et gerer leurs formats.

Je sais que l'ont peut déplacer des div avec Jquery, mais pour ce qui est des créations de div en temps réel, je n'en ai aucune idée. J'imaginé qu'une fois la div créée, j'enregistrerais ses informations dans une base afin qu'elle reste a la bonne place.

Pouvez vous m'aiguillé vers une piste concernant la création de div ?

Merci
Effectivement, il y'a ces fonctions sous Jquery,

J'ai essayé ca:

var $newdiv1 = $('<div id="object1"/>'),
    newdiv2 = document.createElement('div'),
    existingdiv1 = document.getElementById('foo');

$('body').append($newdiv1, [newdiv2, existingdiv1]);


http://api.jquery.com/append/


je l'ai placé dans une fonction que j'appel via un lien.

Ca créer bien deux div, mais ca fait un peut n'importe quoi au niveau des balises, les deux div n'ont pas de balise de fermeture, et je n'arrive pas a les placer ou je les veux.
Modifié par meche (27 Jun 2011 - 16:30)
Je vous mets le code html de ma page avant d'avoir cliqué sur le bouton qui créer une div, et le code après que la div soit crée, peut être que ce sera plus facile pour comprendre ce qu'il ce passe:

Avant d'avoir cliqué sur le bouton:

<body>
		<div id="global">
			<div id="header">
			</div>
			<div id="block">
				<div id="gauche">
					<a href="#" onClick="newDiv()">Ajouter une div ok</a>
				</div>
				<div id="center">
				</div>
				<div id="droite">
				</div>
			</div>
			<div id="footer">
			</div>
		</div>
	</body>



Et le code une fois la div créée:


<div id="global">
			<div id="header">
			</div>
			<div id="block">
				<div id="gauche">
					<a onclick="newDiv()" href="#">Ajouter une div ok</a><br>
				</div>
				<div id="droite">
				</div>
			</div>
			<div id="footer">
			</div>
</div>
<div style="position: relative;" id="Div1" class="ui-draggable"><p id="coordonnees"></p></div>
<div></div>
<div id="center">
</div>


Voici la fonction qui créer la div:
function newDiv(){
                /*$('<div>Test</div>').append('center');*/
				/*$('.inner').append('<p>Test</p>');*/
				
				var $newdiv1 = $('<div id="Div1"><p id="coordonnees"></p></div>'),
				newdiv2 = document.createElement('div'),
				existingdiv1 = document.getElementById('center');

				
				$('body').append($newdiv1, [newdiv2, existingdiv1]);
			}


Sinon j'ai avancé, car j'ai réussi a rendre la div que je viens de créer draggable Smiley biggrin
Modifié par meche (29 Jun 2011 - 11:31)
Pardon, ma question été posté plus haut Smiley rolleyes


Pourquoi la div se place au niveau du body ?


Mais je pense que j'ai trouvé la réponse en bidouillant la fonction !

voici la nouvelle version:


var $newdiv1 = $('<div id="Div1"><p id="coordonnees"></p></div>'),
//newdiv2 = document.createElement('div'),
existingdiv1 = document.getElementById('center');

				
$('#center').append($newdiv1);


J'ai donc mis en commentaire la partie déclaration et création de la seconde div (inutile pour moi),

Puis, j'ai déclaré #center au lieu de body. j'avais deja essayé mais sans succès, mais l'interaction avec la seconde div devait empecher le placement correct.

Donc actuellement, la div est créée, placé automatiquement dans la div #center (même si visuellement elle n'est pas totalement dedans)

J'ai réussi à la rendre directement déplaçable, mais je n'ai pas encore réussi a faire en sorte qu'elle soit également redimentionnable.

La déclaration du redimensionnement directement a la suite de la fonction ne donne rien

ma fonction actuelle:
function newDiv(){
                /*$('<div>Test</div>').append('center');*/
				/*$('.inner').append('<p>Test</p>');*/
				
				var $newdiv1 = $('<div id="Div1"><p id="coordonnees"></p></div>'),
				//newdiv2 = document.createElement('div'),
				existingdiv1 = document.getElementById('center');

				
				$('#center').append($newdiv1);
				
				$(document).ready(function() {
				
					//Rendre "Draggable"
					$("#Div1").draggable({containment: '#center', scroll: false})	
					
					// Affichage des coordonnées
					 $("#Div1").mousemove(function(){
									var coord = $(this).position();
									$("#coordonnees").text( "left: " + coord.left + ", top: " + coord.top );
					 })
				
					 
				});
				
				$(document).ready(function() {
				$("#Div1").resizable({ grid: [50, 50],containment: '#center', minHeight: 150, minWidth: 150});
				//$("#resizable").resizable({ minHeight: 150 });
				//$("#resizable").resizable({ minWidth: 150 });
				
			});

Modifié par meche (29 Jun 2011 - 12:09)
Pour ceux que ca interesse j'ai trouvé la solution pour créer une div, et que cette div soit, et redimensionnable et déplaçable:

Voiçi donc mon code corrigé, par contre sous Ie, la div est créer mais impossible d'interagir avec.

function newDiv(){				
						
				
				// Définition de l'élément html qui va être créé a l'appel de la fonction
				var $newdiv1 = $('	<div id="Div1" class="resizable"><p class="supprDiv" style="display:none;"><a id="defixDiv" href="#" onClick="defixDiv()" style="display:none;">deFix </a><a id="fixDiv" href="#" onClick="fixDiv()">Fix </a><a href="#" onClick="supprDiv()">X</a></p><p id="coordonnees"></p><p id="taille"></p><a href="#" onClick="saveDiv()">Position</a></div>'),
				//newdiv2 = document.createElement('div'),
				existingdiv1 = document.getElementById('center');

				
				$('#center').append($newdiv1);
				
				
				// Partie du script permettant de rendre la div déplaçable et redimensionnable
				$(document).ready(function() {
				
					//Rendre "Draggable"
					$("#Div1").draggable({containment: '#center', scroll: false})	
					
					// Affichage des coordonnées et de la taille
					$("#Div1").mousemove(function(){
									var coord 	= $(this).position();
									var height 	= $(this).outerHeight();
									var width 	= $(this).outerWidth();
									
									$("#coordonnees").text( "left: " + coord.left + ", top: " + coord.top );
									$(".taille").text("hauteur: " + height + "Largeur: " + width);
					})
					//rendre "rezisable"
					$(".resizable").resizable(
										{containment: '#center'},
										{ animate: true },
										{ ghost: true },
										{ helper: 'ui-state-highlight' },
										{ minHeight: 150 },
										{ minWidth: 150 }
										);	 
				});
				
				
				
			
				
				
			}


autre le problème de Internet explorer, j'ai un souci lorsque je combine la limitation du containeur dans la fonction déplacable ET redimmensionnable ({containment: '#center'}) quand j'attrape la div par le coin, parfois elle coince et refuse le redimmensionnement
Merci beaucoup pour ce conseil !! Mais je me suis rendu compte que j'utilise justement, Ui Jquery !

J'ai essayé quelque réglage dans le fonction de Jquery, et rien n'y fait, ce n'est toujours pas fonctionnel sous Ie, alors que tous les autres navigateur cela fonctionne sans souci

Au cas ou vous auriez une idée:

http://www.mariecalmes.fr/test/collection1_serie1.php
Modifié par meche (18 Jul 2011 - 11:01)
Sujet clos
Aller à