11548 sujets

JavaScript, DOM et API Web HTML5

Drag&drop gestion des plans

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;
}

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


et dans mon html:


<head>
<script type="text/javascript" src="lightbox.js"></script>
<script type="text/javascript" src="dragndrop.js"></script>
</head>
<body onmousemove="drag(event);">

<div id="img1" class="drag" onmousedown="beginDrag(this,event);" onmouseup="endDrag();"><a href="image27.jpg" rel="lightbox"></a></div>
<div id="img2" class="drag" onmousedown="beginDrag(this,event);" onmouseup="endDrag();"><a href="image28.jpg" rel="lightbox"></a></div>
<script type="text/javascript">
      //positionnement des divs
			positionne('img1', '290px', '84px');
			positionne('img2', '140px', '310px');
</script>
</body>


ma question est la suivante;

Quel est le code à placer, lors du drag sur la div concernée, pour changer son zIndex et la faire passer au premier plan ?

Notez que je ne m'y connais que très peu en programmation Smiley cligne
Modifié par hellotk (24 Mar 2011 - 10:54)
Je sais que je dois assigner quelque chose du genre : element.style.zIndex=100 quelque part dans mon .js mais je ne sais pas où Smiley decu
Sujet clos
Aller à