Sujet Précédent Sujet Suivant

Drag&drop gestion des plans (javascript)

Fermé
hellotk75 Messages postés 5 Date d'inscription mardi 22 mars 2011 Statut Membre Dernière intervention 23 mars 2011 - 22 mars 2011 à 18:39
hellotk75 Messages postés 5 Date d'inscription mardi 22 mars 2011 Statut Membre Dernière intervention 23 mars 2011 - 23 mars 2011 à 15:10
Bonjour,

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 ?

A voir également:

6 réponses

Réponse 1 / 6
akelo Messages postés 52 Date d'inscription jeudi 22 janvier 2009 Statut Membre Dernière intervention 28 mars 2011 11
23 mars 2011 à 00:51
http://formation-sites.blogspot.com/p/javascript.html
0
Réponse 2 / 6
maka54 Messages postés 698 Date d'inscription mercredi 8 avril 2009 Statut Membre Dernière intervention 4 décembre 2016 80
23 mars 2011 à 08:40
avec zIndex

objectToDrag.style.zIndex = 100;
0
Réponse 3 / 6
hellotk75 Messages postés 5 Date d'inscription mardi 22 mars 2011 Statut Membre Dernière intervention 23 mars 2011
23 mars 2011 à 09:55
voici ce que j'ai fais :

j'ai placé le zIndex dans mon javascript : 
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';
objectToDrag.style.zIndex = 100;
}
}
function endDrag(){
isDragging = false;
return true;
}


et dans mon body : 
<body onmousemove="drag(event);">
<div id="img1" class="drag" onmousedown="beginDrag(this,event);" onmouseup="endDrag();"><a href="image.jpg" rel="lightbox" style="z-index:0;"></a></div>
<div id="img2" class="drag" onmousedown="beginDrag(this,event);" onmouseup="endDrag();"><a href="image2.jpg" rel="lightbox" style="z-index:0;"></a></div>
<script type="text/javascript">
			positionne('img1', '290px', '84px');
			positionne('img2', '140px', '310px');
</script>
</body>


mais ça n'a pas l'air de marcher...
0
Réponse 4 / 6
maka54 Messages postés 698 Date d'inscription mercredi 8 avril 2009 Statut Membre Dernière intervention 4 décembre 2016 80
Modifié par maka54 le 23/03/2011 à 14:24
voilà un exemple de drag and drop qui marche en 2 pages

index.php : 

<html>   
<head>   
<script type="text/javascript" src="drag.js"></script>   
<script type="text/javascript">   
var Z_index = 0;  
function init(){   

 var cont = document.getElementById("content");   
 var divs = cont.getElementsByTagName("div");   
 for(var i=0;i<divs.length;i++){   
  Elt.drag(divs[i]);   
 }   
}   

</script>   
<style type="text/css">   
 #img1{background-color:#ff0000;width:50px;height:50px;position:absolute;}   
 #img2{background-color:#00ff00;width:50px;height:50px;position:absolute;}   
</style>   
<body onload="init();">   
<div id="content">   
 <div id="img1" class="drag" ></div>   
 <div id="img2" class="drag" ></div>   
</div>   

</body>   

</html>


et drag.js : 

var Elt = {  
   
    MyObj : null,  
 x_start : null,  
 y_start : null,  
   
   
   
 drag : function(o)  
    {  
        Elt.MyObj = o ;  
        Elt.MyObj.onmousedown    = Elt.start;  
    },  
   
    start : function(e)  
    {  
    
        Elt.MyObj = this;  
  Z_index++;  
  Elt.MyObj.style.zIndex = Z_index;  
        document.onmousemove    = Elt.move;  
        document.onmouseup      = Elt.end;  
        return false;  
    },  
   
    move : function(e)  
    {  
  e = Elt.GetEvent(e);  
  Elt.MyObj.style.opacity = 0.5;  
        var curX = e.clientX;  
        var curY = e.clientY;  
  Elt.MyObj.style.top = (curY) + 'px';  
        Elt.MyObj.style.left = (curX) + 'px';  

        return false;  
    },  
   
    end : function()  
    {  
  Elt.MyObj.style.opacity = 1;  
        document.onmousemove = null;  
        document.onmouseup   = null;  
        Elt.MyObj = null;  
    },  

   
    GetEvent : function(e)  
    {  
  if (!e) e = event;  
  if(typeof(e.clientX) == 'undefined') e = window.event;  
        return e;  
    },  

};


je viens d'éditer, réessayes comme çà
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
hellotk75 Messages postés 5 Date d'inscription mardi 22 mars 2011 Statut Membre Dernière intervention 23 mars 2011
23 mars 2011 à 13:55
Sur cet exemple le bloc rouge reste toujours au second plan,
moi je souhaiterais que lorsqu'on clique sur une de mes images, elle se mette directement au premier plan
0
maka54 Messages postés 698 Date d'inscription mercredi 8 avril 2009 Statut Membre Dernière intervention 4 décembre 2016 80
23 mars 2011 à 14:08
je viens d'éditer, réessayes comme çà
0
hellotk75 Messages postés 5 Date d'inscription mardi 22 mars 2011 Statut Membre Dernière intervention 23 mars 2011
23 mars 2011 à 14:14
Là je n'ai plus rien qui marche (même en fermant la balise </head> ;))
0
maka54 Messages postés 698 Date d'inscription mercredi 8 avril 2009 Statut Membre Dernière intervention 4 décembre 2016 80
23 mars 2011 à 14:24
pardon, j'ai placé une variable au mauvais endroit, rerpend index.php, j'ai réediter
0
Réponse 6 / 6
hellotk75 Messages postés 5 Date d'inscription mardi 22 mars 2011 Statut Membre Dernière intervention 23 mars 2011
Modifié par hellotk75 le 24/03/2011 à 10:50
voilà c'est exactement ce à quoi je veux arriver,

cependant je tiens à reprendre mon code javascript car il premet d'annuler le simple clic pour permettre à mon lightbox d'être activer par double clic,
j'ai donc fait un essai en suivant le code du zindex que m'as donné mais sans résultat :( 

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


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

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses