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

Résolu
Ammar.Dev
Messages postés
69
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
69
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.

7 réponses

jordane45
Messages postés
35779
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 juillet 2022
358
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 ?
0
@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
144
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.
0
Ammar.Dev
Messages postés
69
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
0
jordane45
Messages postés
35779
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 juillet 2022
358
11 nov. 2014 à 18:35
Je réitère donc. ..... quel code utilises tu pour déplacer tes images ??

0

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

Posez votre question
Ammar.Dev
Messages postés
69
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
0
@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
144
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 !
0
Ammar.Dev
Messages postés
69
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
0