Identifier l'élément enclenchée l'evenement

Résolu

Ammar.Dev Messages postés 52 Date d'inscription mercredi 5 octobre 2005 Statut Membre Dernière intervention 28 janvier 2021 - Modifié par jordane45 le 11/11/2014 à 13:43
Ammar.Dev Messages postés 52 Date d'inscription mercredi 5 octobre 2005 Statut Membre Dernière intervention 28 janvier 2021 - 11 nov. 2014 à 22:26

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.

A voir également:

Identifier l'élément enclenchée l'evenement
Evenement ogame - Forum Delphi / Pascal
Contrôle des entrées événement ✓ - Forum VB.NET
C++ identifier not found - Forum C++ & C++ .NET
Si element ✓ - Forum Javascript / DHTML
Lecture depuis l'élément suivant ✓ - Forum Java

7 réponses

Réponse 1 / 7

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 344
11 nov. 2014 à 13:46

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 ?

Réponse 2 / 7

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
11 nov. 2014 à 17:08

si c'est au moment du drop essai de mettre un événement mousedown dans le tableau et recupere la cellule avec event.target.

Réponse 3 / 7

Ammar.Dev Messages postés 52 Date d'inscription mercredi 5 octobre 2005 Statut Membre Dernière intervention 28 janvier 2021
Modifié par Whismeril le 1/10/2015 à 10:51

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

Réponse 4 / 7

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 344
11 nov. 2014 à 18:35

Je réitère donc. ..... quel code utilises tu pour déplacer tes images ??

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

Posez votre question

Réponse 5 / 7

Ammar.Dev Messages postés 52 Date d'inscription mercredi 5 octobre 2005 Statut Membre Dernière intervention 28 janvier 2021
Modifié par Whismeril le 1/10/2015 à 10:52

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

Réponse 6 / 7

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
Modifié par kazma le 11/11/2014 à 21:28

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 !

Réponse 7 / 7

Ammar.Dev Messages postés 52 Date d'inscription mercredi 5 octobre 2005 Statut Membre Dernière intervention 28 janvier 2021
Modifié par Whismeril le 1/10/2015 à 10:52

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

Discussions similaires

Script : Mail automatique de rappel

ListView recuperer l element de la deuxieme colonnes

Atacher un evenement au bouton "Maximiser" de la barre de titre

CODE gestion, inscription à un événement

Gestion evenement d'un menu

Votre réponse

Discussions similaires