Identifier l'élément enclenchée l'evenement [Résolu]

Signaler
Messages postés
69
Date d'inscription
mercredi 5 octobre 2005
Statut
Membre
Dernière intervention
28 janvier 2021
-
Messages postés
69
Date d'inscription
mercredi 5 octobre 2005
Statut
Membre
Dernière intervention
28 janvier 2021
-
Bonjour,
j'utilise une element déplaçable sous forme d'image et déplacer dans un tableau je veux savoir avec javascript dans quel id de colonne

Edit: suppression de l'adresse mail.

7 réponses

Messages postés
32988
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 juin 2021
351
Bonjour
Ta question n'est pas très clair...
Pourrait tu nous donner plus d'informations. ..
Tu dis "déplacer une image"..tu le fais donc en javascript. ...
Quel code utilises tu ?
Et que souhaites tu avoir ?
Messages postés
1787
Date d'inscription
vendredi 9 mai 2008
Statut
Non membre
Dernière intervention
9 juin 2021
131
si c'est au moment du drop essai de mettre un événement mousedown dans le tableau et recupere la cellule avec event.target.
Messages postés
69
Date d'inscription
mercredi 5 octobre 2005
Statut
Membre
Dernière intervention
28 janvier 2021

je veux dire que je cherches à trouver l'id de la colonne où je déposes l'image à la fin du déplacement avec javascript.

Modération de la signature
Messages postés
32988
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 juin 2021
351
Je réitère donc. ..... quel code utilises tu pour déplacer tes images ??

Messages postés
69
Date d'inscription
mercredi 5 octobre 2005
Statut
Membre
Dernière intervention
28 janvier 2021

voilà le code que j'utilise :
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<script type="text/javascript">
var isdrag=false;
var x,y;
var dobj;
function movemouse(e)
{
  if (isdrag)
  {
    dobj.style.left = tx + e.clientX - x ;
    dobj.style.top  = ty + e.clientY - y ;
    return false;
  }
}
function selectmouse(e)
{
  var fobj = e.target;
   if (fobj.className=="dragme")
  {
    isdrag = true;
    dobj = fobj;
    tx = parseInt(dobj.style.left+0,10);
    ty = parseInt(dobj.style.top+0,10);
    x = e.clientX;
    y = e.clientY;
 
    document.onmousemove=movemouse;
    return false;
  }
}
document.onmousedown=selectmouse;
document.onmouseup=function(){isdrag=false;};
</script>

<style type="text/css">
        .dragme{position:absolute;
    visibility:visible;
  }
</style>


<img src="http://i.imgur.com/c1m9UYF.png?1" alt="drag-and-drop image script" style="cursor:move;" title="drag-and-drop image script" class="dragme" id="croix">


<table> 
    <tr id="ch1">
        <td ><img src="http://i.imgur.com/p1KPWBz.png?1" title="source: imgur.com" /></td>
    </tr>
    <tr id="ch3">
        <td><img src="http://i.imgur.com/p1KPWBz.png?1" title="source: imgur.com" /></td>
    </tr>
    <tr id="ch3">
        <td><img src="http://i.imgur.com/p1KPWBz.png?1" title="source: imgur.com" /></td>
    </tr>
      </table>
 </body>
</html>

Modération de la signature
Messages postés
1787
Date d'inscription
vendredi 9 mai 2008
Statut
Non membre
Dernière intervention
9 juin 2021
131
il faut utiliser l'api drag & drop

teste ce code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

<style type="text/css">
	
	body{
	background:#b2bdc6;
}
	
		#tds{
			margin: 0px 100px;
		 	background: white;
		}
		
		#tds td{
			height:96px;
			width:82px;
			border: 3px solid black;
		}
		
		#tds td img{
			display:block;
			margin:auto;
			margin-top:-10px;
		}

</style>

<script type="text/javascript">

var elem=''

function drag(e){

	var lui=typeof window.addEventListener != 'undefined' ? e.currentTarget : window.event.srcElement;
	
	elem=lui
	e =(!e) ? window.event : e;
	e.dataTransfer.setData('Text','r');
	
}

function droper(e){

	typeof window.addEventListener != 'undefined' ? e.preventDefault() : event.returnValue = false;
	
	var obj = typeof window.addEventListener != 'undefined' ? e.currentTarget : window.event.srcElement;
		
	var valeur = e.dataTransfer.getData("Text");
	obj.appendChild(elem)
	
	alert(obj.parentNode.id)
}

function init(){

	var all=document.getElementById('tds').getElementsByTagName("td")

	for (var i=0; i<all.length; i++){

		all[i].ondragover=function(){return false}

		if(typeof window.addEventListener == 'undefined'){

			all[i].attachEvent('ondrop', droper);
		}
		else{

			all[i].addEventListener('drop', droper, false);
		}
	}
}

onload=init

</script>
</head>
</body>
<img ondragstart='drag(event)' draggable='true' src="http://i.imgur.com/c1m9UYF.png?1" alt="drag-and-drop image script" style="cursor:move;" title="drag-and-drop image script" class="dragme" id="croix">

<table id='tds'> 

    <tr id="ch1">
	<td></td>
    </tr>
	
    <tr id="ch2">
     <td></td>
    </tr>
		
    <tr id="ch3">
    <td></td>
    </tr>
		
      </table>
	</body>
</html>


cours Forest cours !
Messages postés
69
Date d'inscription
mercredi 5 octobre 2005
Statut
Membre
Dernière intervention
28 janvier 2021

oui c vrai votre méthode est trés pratiquable mais mon problème se concentre dans une ancien méthode (parceque je ne commence pas encore à étudier l'evenement de drag & drop.et que le tutoriel que je lis ne m'explique pas comment ultiliser l'evenement drag et drop (http://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript/les-evenements-24)).bon merci pour votre reponse....sujet Resolu par mr.kazma :)

Modération de la signature