Drag&drop gestion des plans (javascript)

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

  • Votes
  • Date
  • Date décroissante
  3. hellotk75 Auteur
    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...
    1. maka54
      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 çà
      2. hellotk75 Auteur
        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
        1. maka54
          je viens d'éditer, réessayes comme çà
        2. hellotk75 Auteur
          Là je n'ai plus rien qui marche (même en fermant la balise </head> ;))
        3. maka54
          pardon, j'ai placé une variable au mauvais endroit, rerpend index.php, j'ai réediter
      3. hellotk75 Auteur
        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>

        Discussions similaires

        C'est quoi "drag and drop" ?
        Mar

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

        3 réponses