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

**abboudi** · 11/11/2014, 12h06

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?

**ryan** · 11/11/2014, 12h33

Yop!

Tu veux dire que tu cherches à trouver l'id de la colonne où tu déposes l'image à la fin du déplacement?

**abboudi** · 11/11/2014, 12h52

exactement

**sekaijin** · 11/11/2014, 13h44

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

**abboudi** · 11/11/2014, 19h32

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**sekaijin** · 11/11/2014, 20h23

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**abboudi** · 12/11/2014, 02h46

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**sekaijin** · 12/11/2014, 10h53

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

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

JavaScript

Discussions similaires

Partager

Partager