11548 sujets

JavaScript, DOM et API Web HTML5

Déplacer des div à la souris

Salut
Je cherche le moyen de faire comme sur le site http://www.netvibes.com/

Comment faire pour déplacer des div ET qu'elles inter-agissent en live lors du déplacement avec celles qui sont sur la page?
Sur le site cité, lorsque vous déplacer une div, les autres bougent pour lui laisser la place de se mettre....

Vous savez où je peux trouver ce code?
voila ce que j'ai fait pour le moment, mais ça ne marche pas terrible. en plus j'ai un décalage... Smiley decu 

<head>
<style>
.clsDiv{
	position:relative;
	float:left;
	width:100px;height:200px;
	background-color:#bfbfbf;
	margin:20px;
	border: 1px #000000 solid;
}
</style>
</head>
<script type="text/javascript">
var clicEnCours = false;
var position_x = 0;
var position_y = 0;
var origineDiv_x = 0;
var iExplorer = false;
var deplacable = "";
if (document.all){
  iExplorer = true;
} 
function boutonPresse(pDiv){
	chaineX = document.getElementById(pDiv).style.left;
	chaineY = document.getElementById(pDiv).style.top;
	origineDiv_x = x - chaineX.substr(0,chaineX.length-2);
	origineDiv_y = y - chaineY.substr(0,chaineY.length-2);
	document.getElementById(pDiv).innerHTML = document.getElementById(pDiv).style.left + '>' + origineDiv_y;
	clicEnCours = true;
	deplacable = pDiv;
	document.getElementById(deplacable).style.cursor = 'move';
	document.getElementById(deplacable).style.zIndex = 100;
	document.getElementById(deplacable).style.border = '1px #000000 dotted';
}

function boutonRelache(pDiv){
	clicEnCours = false;
	document.getElementById(deplacable).style.cursor = 'default';
	document.getElementById(deplacable).style.zIndex = 1;
	document.getElementById(deplacable).style.border = '1px #000000 solid';
	deplacable = "";
}

function deplacementSouris(e){

	x = (iExplorer) ? event.x + document.body.scrollLeft : e.pageX;
	y = (iExplorer) ? event.y + document.body.scrollTop :  e.pageY;
	document.title = x + '>' + y;
	
	if (clicEnCours && document.getElementById){
		position_x = x - origineDiv_x;
		position_y = y - origineDiv_y;
		document.getElementById(deplacable).style.left = position_x;
		document.getElementById(deplacable).style.top = position_y;
	}
}

if(!iExplorer){
  document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = deplacementSouris;
</script>
<body>
<div class="clsDiv" id="div1" onmousedown="boutonPresse('div1');" onmouseup="boutonRelache('div1');">
</div>
<div class="clsDiv" id="div2" onmousedown="boutonPresse('div2');" onmouseup="boutonRelache('div2');">
</div>
<div class="clsDiv" id="div3" onmousedown="boutonPresse('div3');" onmouseup="boutonRelache('div3');">
</div>
</body>

Edit: modification du code: je n'ai plus de décalage, par contre les div n'inter-agissent toujours pas entre eux...
Modifié par jeromax (20 Feb 2006 - 10:53)
Salut
jeromax a écrit :
Salut
Je cherche le moyen de faire comme sur le site http://www.netvibes.com/

Comment faire pour déplacer des div ET qu'elles inter-agissent en live lors du déplacement avec celles qui sont sur la page?
Sur le site cité, lorsque vous déplacer une div, les autres bougent pour lui laisser la place de se mettre....

Vous savez où je peux trouver ce code?

Cela ne me parait pas bien compliqué :

les "divs" doivent être dans le flux de la page.
Quand on clique sur le titre d'un des "divs" déplaçables :
Ce div passe en position:absolute;
ses attributs left et top sont rattachés à la souris;
un élément vide prends ses dimensions le remplace dans la page;
Cet élément est aussi rattaché à la souris et se déplace par coupé/collé de place en place.(non indispensable)
Au relaché de la souris,Le div prends la place de l'élément vide et perds sa position "absolute".
si si c'est compliqué.... Smiley cligne
Ta solution ne marche pas...
Lorsqu'on passe le div qu'on déplace en absolute tous les autres div se décalent et reviennent à leur position d'origine lorsqu'on passe le div déplacé en relative...
jeromax a écrit :
si si c'est compliqué.... Smiley cligne
Ta solution ne marche pas...
...

Merci Smiley eek
reste plus qu'à amélioré la fonction "bouge"; ça va bien de droite à gauche, mais pas l'inverse à cause de insertBefore

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>test</title>
<style type="text/css" media="screen" >
#t2 div{
cursor:move;
height:150px;
width:150px;
float:left;
background-color:#ffc;
padding:0 3px;
margin:10px 0 0 10px;
border:1px solid #000;
}
</style>
<script type="text/javascript" >
<!-- drag&drop d'objets

function selObj(e){ // sélection de l'objet qui a généré l'évènement
el=gk?e.target:event.srcElement;
if(!el.tagName)el=el.parentNode // pour NS6+
}

function drag(e){
selObj(e);
if (el.parentNode.id=="t2" && ob==D){  // objet est déplaçable
	D.getElementById("t2").insertBefore(im1,el)
  ob=el;el=D; // le capture
	with(ob.style){position="absolute";left=px+"px";top=py+3+"px";}
  }
with(im1.style){
	height=width=150+"px";background="transparent";border="1px blue dashed";
	};
return false 
}

function bouge(e){ // suit la souris

selObj(e);
sx=gk?pageXOffset:db.scrollLeft;     //scroll h
sy=gk?pageYOffset:db.scrollTop;      //scroll v
px=gk?e.pageX:event.clientX+sx;      //curseur x
py=gk?e.pageY:event.clientY+sy;      //curseur y
if(ob != D){
  with(ob.style){left=px+"px";top=py+3+"px";
    }
		D.getElementById("t2").insertBefore(im1,el)
  }
return false 
}

function drop(e){ // dépose l'objet
selObj(e);//
if(el==im1){  
	D.getElementById("t2").replaceChild(ob, el)
	ob.style.position="";
  ob=D; // annule la sélection
	}
}

function initdrag(){
db=!D.documentElement.clientWidth?D.body:D.documentElement //quirk IE6
addEvent(D,"mousemove",bouge);addEvent(D,"mousedown",drag); addEvent(D,"mouseup",drop);
im1=D.createElement("div");D.appendChild(im1);im1.id="carre";
}

function addEvent(obj,evType,fn,capt){ // ajoute un événement sans écraser l'éxistant.
if(obj.addEventListener){obj.addEventListener(evType,fn,capt);return true;} // NS6+
else if(obj.attachEvent)obj.attachEvent("on"+evType,fn) // IE 5+
else {return false;}
} 

D=document;ob=D;gk=window.Event?1:0/*Gecko*/;
addEvent(window,"load",initdrag) 

//-->
</script>
 </head>
  <body >
<div id="t2">
<div>div1</div> 
<div>div2</div> 
<div>div3</div> 
<div>div4</div> 
</div>

 </body>
</html>
Cette fonction (déplacement et réorganisation de divs) est utilisée dans dotclear (page ecrire/cat_list.php)... Avec ce script tu peux aussi appliquer des contraintes au déplacement (seulement vertical, etc) Smiley cligne
Bonjour,
MS-DOS_1991 a écrit :
Cette fonction (déplacement et réorganisation de divs) est utilisée dans dotclear (page ecrire/cat_list.php)... Avec ce script tu peux aussi appliquer des contraintes au déplacement (seulement vertical, etc) Smiley cligne


Tu n'aurais pas un lien plus précis, merci ?
Moi ce que je cherche, c est commetn ajouté un nouvel onglet.
Pour le deplacement des images 'du contenus' , voici un un site qui va vous permettre d'avoir le code source exacte.
http://tool-man.org/examples/sorting.html
Ainsi, si vous arriver a extraire le code utile ça serait gentil de votre part.
Moi je ve l exemple de " Slideshow Sorter " que vous trouverez dans le fichier zip , dans tool-man\examples\edit-in-place.html.
Merci
Sujet clos
Aller à