event.pageX et event.pageY et événement ondrag

**blacked** · 17/03/2012, 11h10

Bonjour à tous,

Je m'initie au drag and drop en html5 et j'aimerais pouvoir scroller la page quant on est entrain de déplacer un élément et que l'on arrive sur les cotés de la fenêtre.

Le problème est que les attributs event.pageX et event.pageY présents dans l’événement onmousemove ou encore onclick ne le sont pas dans ondrag et ils me seront utiles pour avoir les coordonnées du curseur.

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
 
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>HTML5 : Drag & Drop</title>
	</head>
	<body>
		<img id="img" src="images.jpeg" alt="" draggable="true"/>
		<script type="text/javascript" src="jquery-1.7.1.min.js" ></script>
		<script>
			$(document).ready(function(){
				//fonctionne
				$("#img").on("click",function(e){
					console.log(e.pageY);
				});
 
				//undefined
				$("#img").on("drag",function(e){
					console.log(e.pageY);
				});
 
				//undefined
				$("#img").on("drag",function(e){
					$(this).trigger("click");
				});
 
			});
		</script>
	</body>
</html>

J'aimerais donc savoir si vous avez une idée pour contourner ce problème.

Merci.

**Bovino** · 17/03/2012, 12h45

Il suffit d'affecter un gestionnaire mousemove pendant le drag pour récupérer la position de la souris

**blacked** · 17/03/2012, 16h52

Je ne comprend pas très bien ton explication. Pourrais tu me donner plus d'informations ?

**Bovino** · 18/03/2012, 10h52

Un truc du style

Code :

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

1
2
3
4
5
6
7
8
9
function draggedEvent(event){
    console.log(event.pageX + ' / ' + event.pageY);
}
$("#img").on("drag",function(){
    $(document).on('mousemove', draggedEvent);
});
$("#img").on("drop",function(){
    $(document).off('mousemove', draggedEvent);
});

**danielhagnoul** · 18/03/2012, 12h29

Bonjour

Ne pas confondre jQuery et les nouveautés HTML5 !

Comme jQuery veut être compatible IE6 et +, il n'y aura pas d'événement drag en jQuery sauf abandon du support des navigateurs obsolètes.

Mais il y a jQuery UI Draggable et UI Droppable.

Il me semble que l'événement par défaut est déjà un mouseevent qui contient tout ce qui est nécessaire.

Code :

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

1
2
3
<img src="../imageTest.png"  ondragstart="drag(event)">
 
<div ondrop="drop(event)"></div>

Code :

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

1
2
3
4
5
6
7
function drag( evt ){
	console.log( evt ); // evt est déjà un mouseevent
}
 
function drop( evt ){
	// evt idem
}

**blacked** · 18/03/2012, 12h38

Ça ne fonctionne pas

.

Le problème est que tout de suite après l'événement ondragstart, ondrag prend le relais et empêche tout autre événement de s'exécuter.

Je ne peux donc pas utiliser onmousemove pendant le déplacement de l'élément.

Le fait d'utiliser la fonction trigger() de jquery permet de remédier à ce problème mais il ne récupère pas les propriétés dont j'ai besoin (e.pageY et e.pageX).

**blacked** · 18/03/2012, 13h16

Je viens de vérifier, l'événement ondrag par défaut de javascript n'a pas les propriétés pageX, pageY ou encore clientX et clientY alors qu'elles sont présentes dans l'événement ondragstart.

Existe-t-il un moyen de les récupérer ?

Je n'utilise pas le plugin drag and drop de JQuery UI.

Pour être plus précis dans ce que je suis entrain de faire, j'ai voulu apprendre à la fois à utiliser le drag and drop en html5 et la POO en créant un plugin JQuery qui permettrai d'échanger des éléments draggable.

Étant donné le temps que j'y ai consacré, j'aimerai pouvoir contourner ce problème tout en continuant à utiliser les fonctionnalités d'HTML5.

event.pageX et event.pageY et événement ondrag

jQuery

Vue hybride

Discussions similaires

Partager

Partager