drag&drop premier plan

Sujet résolu

22 mars 2011 à 18:27:06

Bonjour à tous,
j'ai des images contenues dans des div déplaçables par une fonction drag&drop en javascript que voici :

function positionne(p_id, p_posX, p_pos_Y){
document.getElementById(p_id).style.left = p_posX;
document.getElementById(p_id).style.top = p_pos_Y;
}
function getPositionCurseur(e){
//ie
if(document.all){
curX = event.clientX;
curY = event.clientY;
}

//netscape 4
if(document.layers){
curX = e.pageX;
curY = e.pageY;
}

//mozilla
if(document.getElementById){
curX = e.clientX;
curY = e.clientY;
}
}
function beginDrag(p_obj,e){
   var t=e.target?e.target:e.srcElement;
   while (t.nodeType!=1) t=t.parentNode;
   if (t.tagName.toLowerCase()=='a') return true;
   isDragging = true;
objectToDrag = p_obj;
getPositionCurseur(e);
ecartX = curX - parseInt(objectToDrag.style.left);
ecartY = curY - parseInt(objectToDrag.style.top);
}

function drag(e){
var newPosX;
var newPosY;
if(isDragging == true){

getPositionCurseur(e);
newPosX = curX - ecartX;
newPosY = curY - ecartY;

objectToDrag.style.left = newPosX + 'px';
objectToDrag.style.top = newPosY + 'px';

}
}
function endDrag(){
isDragging = false;
return true;

}

ma question est la suivante;

Serait-il possible, lors du drag sur la div concernée, de la faire passer au premier plan par rapport aux autres ?

Golmote

22 mars 2011 à 19:49:34

Oui, c'est possible.

Faut modifier son zIndex.

hellotk

22 mars 2011 à 20:11:27

pourrais-tu me donner le code pour modifier le z-index parceque je suis débutant en programmation...
si j'ai bien compris, il faut faire en sorte que pour l'élément choisi, son z-index soit supérieur aux autres.

Golmote

22 mars 2011 à 21:10:12

Ouaip, c'est cela.

Modifier le style d'un élément fait partie des bases du DHTML. Tu apprendrais certainement comment faire en lisant le tuto.

Dynamisez vos sites web avec Javascript !

hellotk

22 mars 2011 à 21:39:42

ok merci je vais potasser tout ça...

hellotk

23 mars 2011 à 22:02:45

j'ai fais un essai en suivant le code zindex mais sans résultat, je ne dois pas le déclarer correctement

voici ce que j'ai :

var Z_index = 0; 
var dragobject={
	x:0, y:0, offsetx:null,offsety:null,targetobj:null,dragapproved:0,
	initialize:function(){
		document.onmousedown=this.drag
		document.onmouseup=function(){this.dragapproved=0}}
	,drag:function(e){
		var evtobj=window.event? window.event:e
		this.targetobj=window.event? event.srcElement:e.target
		while (this.targetobj.className!="drag" && this.targetobj.tagName!="BODY") this.targetobj=this.targetobj.parentNode
		if (this.targetobj.className=="drag"){
			this.dragapproved=1
			if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
			if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
			this.offsetx=parseInt(this.targetobj.style.left)
			this.offsety=parseInt(this.targetobj.style.top)
			this.x=evtobj.clientX
			this.y=evtobj.clientY
			if (evtobj.preventDefault) evtobj.preventDefault()
			document.onmousemove=dragobject.moveit}}
	,moveit:function(e){
		var evtobj=window.event? window.event:e
		if (this.dragapproved==1){
			this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
			this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
		return false}}
}
dragobject.initialize()

function positionne(p_id, p_posX, p_pos_Y){
document.getElementById(p_id).style.left = p_posX;
document.getElementById(p_id).style.top = p_pos_Y;
}
function getPositionCurseur(e){
//ie
if(document.all){
curX = event.clientX;
curY = event.clientY;
}

//netscape 4
if(document.layers){
curX = e.pageX;
curY = e.pageY;
}

//mozilla
if(document.getElementById){
curX = e.clientX;
curY = e.clientY;
}
}
function beginDrag(p_obj,e){
   var t=e.target?e.target:e.srcElement;
// Pour les clics sur un noeud texte de Mozilla et autres... 
   while (t.nodeType!=1) t=t.parentNode;
   if (t.tagName.toLowerCase()=='a') return true;
   isDragging = true;
objectToDrag = p_obj;
getPositionCurseur(e);
ecartX = curX - parseInt(objectToDrag.style.left);
ecartY = curY - parseInt(objectToDrag.style.top);
}

function drag(e){
var newPosX;
var newPosY;
if(isDragging == true){

getPositionCurseur(e);
newPosX = curX - ecartX;
newPosY = curY - ecartY;

objectToDrag.style.left = newPosX + 'px';
objectToDrag.style.top = newPosY + 'px';
Z_index++; 
objectToDrag.style.zIndex = Z_index;
}
}
function endDrag(){
isDragging = false;
return true;
}

et mon html :

<head>
<script type="text/javascript" src="lightbox.js"></script>
<script type="text/javascript" src="dnd.js"></script>
<style type="text/css">
.drag {
	display:block;
	position:relative;
	border:0;
}
</style>
</head>
<body onmousemove="drag(event);">
<div id="img1" class="drag" onmousedown="beginDrag(this,event);" onmouseup="endDrag();"><a href="image.jpg" rel="lightbox"></a></div>
<div id="img2" class="drag" onmousedown="beginDrag(this,event);" onmouseup="endDrag();"><a href="image2.jpg" rel="lightbox"></a></div>
<script type="text/javascript">
			positionne('img1', '290px', '84px');
			positionne('img2', '140px', '310px');
</script>
</body>

Golmote

23 mars 2011 à 22:45:25

Euh... si, si, ça fonctionne...

Qu'indique la console d'erreur ? (Outils -> Console d'erreurs sous Firefox)

hellotk

24 mars 2011 à 10:17:50

la console d'erreur me met :

Erreur: isDragging is not defined ligne: 70

voici la ligne en question:

67 function drag(e){
68 var newPosX;
69 var newPosY;
70 if(isDragging == true){

restimel

24 mars 2011 à 11:40:05

Ben justement il est déclaré où isDragging? je ne vois aucun var isDragging
La seule affectation que je vois sont lignes 58 et 81 mais ces lignes sont appelées après la ligne 68 (on bouge d'abord la souris avant de pouvoir cliqué ou relâcher le bouton)

{les numéros de lignes que j'indique correspondent à ton 2e code, donc par rapport à ta page il semble y avoir un décalage de 2 lignes}

hellotk

24 mars 2011 à 13:36:53

Bon, j'ai changé le code de mon drag&drop; j'y suis presque arrivé :

function positionne(p_id, p_posX, p_pos_Y){
document.getElementById(p_id).style.left = p_posX;
document.getElementById(p_id).style.top = p_pos_Y;
}

var dragobject={
	x:0, y:0, offsetx:null,offsety:null,targetobj:null,dragapproved:0,
	initialize:function(){
		document.onmousedown=this.drag
		document.onmouseup=function(){this.dragapproved=0; this.targetobj.style.zIndex='';}}
		
	,drag:function(e){
		var evtobj=window.event? window.event:e
		this.targetobj=window.event? event.srcElement:e.target
		while (this.targetobj.className!="drag" && this.targetobj.tagName!="BODY") this.targetobj=this.targetobj.parentNode
		if (this.targetobj.className=="drag"){
			this.dragapproved=1;
			this.targetobj.style.zIndex='999';
			if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
			if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
			this.offsetx=parseInt(this.targetobj.style.left)
			this.offsety=parseInt(this.targetobj.style.top)
			this.x=evtobj.clientX
			this.y=evtobj.clientY
			if (evtobj.preventDefault) evtobj.preventDefault()
			document.onmousemove=dragobject.moveit}}
			
	,moveit:function(e){
		var evtobj=window.event? window.event:e
		if (this.dragapproved==1){
			this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
			this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"

		return false}}
}
dragobject.initialize()

le seul soucis c'est que lorsque je clique sur l'image, elle vient bien au premier plan
mais quand je relâche elle se remet en arrière plan, une idée ?

restimel

24 mars 2011 à 16:26:51

ligne 10: tu fais this.targetobj.style.zIndex=''; du coup elle se retrouve à nouveau derrière puisque tu enlèves le z-index

hellotk

24 mars 2011 à 19:31:22

exact

ça y est j'ai réussi, j'ai crée une varibale pour le zindex :

var z=1

Ensuite j'ai incrémenté cette variable dans la fonction drag :

this.targetobj.style.zIndex=z++;

ça marche nickel !