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

Signaler
Messages postés
68
Date d'inscription
mercredi 5 octobre 2005
Statut
Membre
Dernière intervention
25 octobre 2020
-
Messages postés
68
Date d'inscription
mercredi 5 octobre 2005
Statut
Membre
Dernière intervention
25 octobre 2020
-
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
31082
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 janvier 2021
342
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
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
115
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
68
Date d'inscription
mercredi 5 octobre 2005
Statut
Membre
Dernière intervention
25 octobre 2020

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
31082
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 janvier 2021
342
Je réitère donc. ..... quel code utilises tu pour déplacer tes images ??

Messages postés
68
Date d'inscription
mercredi 5 octobre 2005
Statut
Membre
Dernière intervention
25 octobre 2020

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
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
115
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
68
Date d'inscription
mercredi 5 octobre 2005
Statut
Membre
Dernière intervention
25 octobre 2020

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