Identifier l'élément qui enclenche l'événement

Version imprimable

11/11/2014, 12h06
abboudi

Identifier l'élément qui enclenche l'événement

bonjour j'utilise une element déplaçable sous forme d'image et déplacer dans un tableau je veux savoir dans quel id de colonne se placer?
11/11/2014, 12h33
ryan

Yop!

Tu veux dire que tu cherches à trouver l'id de la colonne où tu déposes l'image à la fin du déplacement?
11/11/2014, 12h52
abboudi

exactement :plusser:
11/11/2014, 13h44
sekaijin

une petite lecture de l'API ne fait pas de mal
http://www.w3schools.com/html/html5_draganddrop.asp

le paramètre event reçu par la méthode appelée lors d'un drop corresponds à l'événement de dépôt. il contient les référence au données de l'événement drag associé et à l'objet du DOM sur lequel se fait le dépôt event.taget.

mais si tu à mis ton code sur ondrop d'un élément HTML l'objet this est tout simplement cet élément HTML.

A+JYT

pour ce script comment faire pour resoudre ce problème?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<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>

ou est le drag and drop la dedans ??

Comme tu peux le voir dans cet exemple l'image drag1 gère l'événement dragStart (attribut ondargstart)
et le Div div1 gère l'événement drop (attribut ondrop)
de plus le Div div1 gère l'événement allowDrop

ainsi lorsque l'utilisateur drage l'image la fonction drag est activée. dans cet exemple
on associe à la propriété "text" des data de cet event l'id de l'image.

lorsque l'utilisateur dépose l'image sur le Div la fonction drop est activée.
dans ce code on attache dans le div l'image ev.target.appendChild(document.getElementById(data));.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>
je ne vois pas de drag et drop dans ton code.
A+JYT

votre code de div ne permet pas de déplâcer l'element, mais je trouve ce code dans un autre forum et je pense que ça marche.merci pour votre aide.:)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!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>

mais il m'a dit comme toi "il faut utiliser l'api drag & drop " .merci ...sujet resolu.

12/11/2014, 10h53
sekaijin

non mon code permet de déplacer l'image dans le div
A+JYT