Drag&drop gestion des plans (javascript)

hellotk75 Messages postés 5 Statut Membre -  
hellotk75 Messages postés 5 Statut Membre -
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 ?

6 réponses

  1.
    akelo Messages postés 90 Statut Membre 11
     
    http://formation-sites.blogspot.com/p/javascript.html
    0
  2. maka54 Messages postés 721 Statut Membre 80
     
    avec zIndex

    objectToDrag.style.zIndex = 100;
    0
  3. hellotk75 Messages postés 5 Statut Membre
     
    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
  4. maka54 Messages postés 721 Statut Membre 80
     
    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

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

    Posez votre question
  6. hellotk75 Messages postés 5 Statut Membre
     
    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
    1. maka54 Messages postés 721 Statut Membre 80
       
      je viens d'éditer, réessayes comme çà
      0
    2. hellotk75 Messages postés 5 Statut Membre
       
      Là je n'ai plus rien qui marche (même en fermant la balise </head> ;))
      0
    3. maka54 Messages postés 721 Statut Membre 80
       
      pardon, j'ai placé une variable au mauvais endroit, rerpend index.php, j'ai réediter
      0
  7. hellotk75 Messages postés 5 Statut Membre
     
    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

C'est quoi "drag and drop" ?
Mar -
Nunuxnewby -

8 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses