déplacer une div qui suit un curseur

**freye** · 05/04/2012, 18h19

Bonjour

J'ai un slider consitué d'un curseur carré susceptible de se déplacer sur un axe horizontal (grâce un cliquer-tirer), pour cela j'ai utiilisé un plugin car je n'arrivais pas à le faire autrement. Mon problème est le suivant :
Je cherche un moyen (sans passer par un plugin) de déplacer une div donnée en fonction du déplacement du curseur carré, en gros que leur mouvement soit liés en temps réel. (quel que soit la fonction mathématique qui relie leurs coordonnées, ce n'est pas le plus important, après j'adapte...)

Merci
(je suis débutant)

**Watilin** · 05/04/2012, 21h22

Salut !

Tout dépend de la façon dont est fait ton plugin de « glisser-tirer ». En fait il contient des fonctions qui réagissent aux évènements de la souris (mousedown, mousemove, etc.). Il faudra que tu regardes comment il est fait pour attacher tes propres fonctions dessus, ou bien que tu t'en débarrasses.

Il y a d'ores-et-déjà une API HTML5 pour le glisser-déposer (drag and drop) mais je ne sais pas m'en servir. Par contre je vais t'expliquer brièvement le principe du glisser-déposer avec les évènements « HTML4 ».
D'abord, il y a trois éléments HTML qui doivent réagir aux évènements de la souris. Le premier réagit quand on enfonce le bouton (en l'occurence ton slider), le second réagit quand on déplace la souris avec le bouton enfoncé (en général, la page entière), et le troisième réagit quand on relâche le bouton (souvent l'objet window, ce qui permet de détecter le relâchement même s'il n'a pas lieu sur la page).
Les évènements associés sont, respectivement, mousedown, mousemove et mouseup. Tu dois créer 3 fonctions et attacher les éléments HTML concernés à chacun de ces 3 évènements, avec addEventListener ou attachEvent, ou bien les gestionnaires d'évènements fournis par ta bibliothèque, si tu en utilises une. Fais une recherche en ligne à ce sujet, ce ne sont pas les ressources qui manquent

Tes fonctions doivent prendre en paramètre un objet de type Event, qui porte notamment les propriétés clientX et clientY, qui sont les coordonnées de la souris au moment où l'évènement a été levé. Utilise ces coordonnées dans la fonction qui gère mousemove pour les passer à ta « fonction mathématique ».

Un exemple concret :

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
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
<!DOCTYPE html>
<html lang=fr>
<head>
<meta charset=utf-8>
<title>Slider simple</title>
<style>
 
#slider {
        cursor: move;   /* signale à l'utilisateur que l'objet peut être déplacé */
        position: absolute;
        top: 5em;
        left: 5em;
        width: 30px;
        height: 30px;
        background: #58f;
}
#bloc {
        position: absolute;
        top: 8em;
        left: 13em;
        width: 250px;
        height: 200px;
        background: #cf5;
}
 
</style>
</head>
<body>
 
<div id=slider></div>
<div id=bloc></div>
 
<script>
 
var $slider = document.getElementById('slider');
var $bloc = document.getElementById('bloc');
 
// la fonction mathématique
function compliquee( r ) {
        var s = r * Math.PI / 600,
                x = 400 * Math.sin(s),
                y = 400 * Math.cos(s);
        $bloc.style.left = x + 'px';
        $bloc.style.top = y + 'px';
}
 
// la fonction qui réagit au mousemove
// je la déclare à l'avance pour garder sa référence
function slide( e ) {
        // note comment j'utilise max et min pour faire un intervalle
        var y = Math.max(0, Math.min(300, e.clientY));
        $slider.style.top = y + 'px';
        compliquee(y);
}
 
$slider.addEventListener('mousedown', function( e ) {
        // il faut empêcher le comportement par défaut du mousedown, sinon il gêne
        e.preventDefault();
        // j'inscris ma fonction slide
        window.addEventListener('mousemove', slide, false);
}, false);
 
window.addEventListener('mouseup', function( e ) {
        // le bouton est relâché, donc je désinscris ma fonction slide
        // c'est pour ça que j'avais besoin de la référence
        this.removeEventListener('mousemove', slide, false);
}, false);
 
</script>
</body>
</html>

Bon courage

**freye** · 05/04/2012, 21h52

un grand merci Vatilin, c'est exactement ce que je cherchais.
Tu m'as fait une équation paramétrique de cercle ^^
Je regarderai ça en détail ce week end quand j'aurai plus le temps car il y a des commandes que je ne connais pas. Je vais décortiquer tout ça et reviendrai surement te demander des précisions.
merci encore

**Watilin** · 05/04/2012, 21h55

Envoyé par freye

Tu m'as fait une équation paramétrique de cercle ^^

De quart de cercle pour être exact

**freye** · 08/04/2012, 17h31

SAlut !
J'ai pigé en gros ta méthode et je pense être capable de l'adapter à mes besoins. Pas mal le truc pour l'intervalle, je retiens !
Par contre je ne comprends pas trop la nature de la variable que tu nommes (e), apparement ce n'est pas un nombre, ni un caractère...
par exemple dans :

$slider.addEventListener('mousedown', function( e ) {

Autre chose, malgré ton commentaire dans le code, je ne comprends pas l'utilité du :
e.preventDefault();
D'autant que, quand j'ai supprimé cette ligne pour comprendre son utilité, cela n'a rien changé.
Dernière chose : à quoi sert le "false"
Merci !

**Watilin** · 08/04/2012, 20h53

Salut,
c'est vrai que j'aurais pu choisir un nom plus explicite pour e. Il s'agit de l'objet de type Event dont je t'ai parlé. En fait, un tel objet est créé à chaque fois qu'un évènement est déclenché, et cet objet est passé en paramètre aux différentes méthodes qui sont liées à cet évènement.

Le preventDefault est censé, comme je le disais, annuler le comportement par défaut du navigateur, pour éviter les turbulences. En général, ton navigateur prend en charge le glisser-déposer à sa façon, par exemple sous Firefox, si tu tentes de déplacer un élément, tu vois une copie de cet élément à moitié transparente suivre la souris, et le curseur se transforme en symbole « interdit ». Si ton navigateur ne fait pas ça, tu as de la chance

mais il vaut mieux laisser le preventDefault pour que ça marche bien chez tout le monde.

Le false est malheureusement une obligation du standard (ce n'est que mon avis personnel, mais trop de fonctions du DOM ont des paramètres qui pourraient être optionnels mais ne le sont pas). Dans la spécif, le paramètre s'appelle useCapture, littéralement « utiliser la capture ». Ça concerne le moment où l'évènement doit être intercepté : pendant la phase de capture, ou pendant la phase de bouillonnement. C'est du fluff technique un peu tordu donc je ne vais pas rentrer dans les détails ; fais des recherches si ça t'intéresse. Comme de toute façon, MSIE n'implémente que la phase de bouillonnement, pour rester compatible on met false

Plus d'infos : http://hornetbzz.developpez.com/tuto...ript/dom/#L5-C

Bonne lecture