Concevoir des sliders perso

**patricktoulon** · 27/02/2018, 15h40

Bonjour a tous

vu que les imput TYPE range c'est horrible dans IE je me fait mes propres sliders
mais n'arrive pas a le faire fonctionner

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
<!doctype html>
<html lang="fr">
<head>
 <!--meta charset="utf-8"-->
  <title>TEST SLIDE</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<style>
</style>
<script  type= "text/javascript">
var barre;
var sl;
var curseur;
var oldX;
var newX;
var moinsX;
function dragStart(event) {
 console.log("depart");
        curseur = event.target;
 barre = document.getElementById("barre1");
 event.stopPropagation();
 oldX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
 moinsX = oldX - curseur.offsetLeft;
        sl=true;
}
function dragging(event) {
 newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
 console.log("deplacement " +newX);
        //event.stopPropagation();
 curseur.style.position = "absolute";
 curseur.style.left = (newX - moinsX) + "px";
}
function relache(event) {
 //event.stopPropagation();
}
function ajoute() {
 barre = document.getElementById("barre1");
 var curseur=document.getElementById("curseur1");
        curseur.addEventListener("dragstart", dragStart, false);
 curseur.addEventListener("ondrag", dragging, false);
 curseur.addEventListener("dragend", relache, false);
}
</script>
</head>
<body>
 <div id="conteneur1" style="position:absolute;height:200px;left:28px;width:500px;border:2 solid red;">
   un slide pas comme les autre 
<p id ="res"></p>
<br/><br/>
<div id="barre1"  style="width:200px;height:4px;border:2px solid blue;">
<div id="curseur1" style="margin-top:-5px;width:8px;height:15px;background-color:red;border-radius:4px;" draggable="true"></div>
</div>
</div>
<script>ajoute();</script>
</body>
</html>

**Beginner.** · 27/02/2018, 15h59

Salut,

C'est quoi au juste un sliders ? Est-ce une sorte de "splitter"/"split pane" comme ici : http://andrienko.github.io/splitter ?

EDIT : Ah non ça y est je vois ce que c'est en testant ton code...

EDIT2 : Je sais pourquoi ça marche pas c'est parce qu'il n'est pas comme les autres comme tu l'écris... Non blague à part je regarde...

**Beginner.** · 27/02/2018, 16h27

J'ai regardé et je vois que tu mélanges une gestion perso avec les événements du glisser/déposer natif mais celui-ci a des règles qui dépendent du navigateurs, c'est faisable mais bon à ta place je le ferais sans le glisser/déposer natif comme tu l'as déjà fait pour les images...

En plus dans ton cas tu veux que les déplacements se fassent selon une seule dimension (horizontalement) et justement je ne suis pas sûr qu'on puisse imposer cela avec le glisser/déposer natif...

J'avais ouvert un fil là-dessus mais je ne le retrouve pas...

**patricktoulon** · 27/02/2018, 17h42

re
bonjour beguinner
regarde dans ce model j'utilise les evenement drag builtdin pour faire mon drag perso (exclusivement IE) et ca fonctionne tres bien

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
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
100
 
<!DOCTYPE HTML >
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>patrick WYSIWYG html </title>
    <meta http-equiv="X-UA-Compatible" content="IE=11">
 
<style> 
html{
width:100%;
height:100%;
}
#editeur{
position:absolute;
width:900px;
height:600px;
border:2px solid red;
overflow:auto;
}
 
#drago{
width:100px;
height:100px;
border:2px solid blue;
}
</style>
 
<script type="text/javascript">
        var drago;
        var oldX;
        var oldY;
        var DX;
        var DY;
        var oldborder;
        var editeur;
        var oldparent;
        var newX;
        var newY;
        // event.stopPropagation();
        //event.returnValue = false;
        //var rect = drago.getBoundingClientRect();
        // event.preventDefault();
        function dragStart(event) {
                drago = event.target;
                event.stopPropagation();
                editeur = document.getElementById("editeur");
                oldparent = drago.parentElement;
                oldborder = drago.style.border;
                drago.style.border = "4px dotted gray";
                oldX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
                oldY = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
                moinsX = oldX - drago.offsetLeft;
                moinsY = oldY - drago.offsetTop;
                DX = oldX - moinsX;
                DY = oldY - moinsY;
        }
        function dragging(event) {
                event.stopPropagation();
                newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
                newY = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
                drago.style.position = "absolute";
                drago.style.left = (newX - moinsX) + "px";
                drago.style.top = (newY - moinsY) + "px";
        }
        function relache(event) {
                event.stopPropagation();
                var rect = drago.getBoundingClientRect();
                var divs = editeur.getElementsByTagName("div");
                var newparent = document.getElementById("editeur");
                for (var i = 0; i < divs.length; i++) {
                        var rect2 = divs[i].getBoundingClientRect();
                        if (rect2.left < rect.left && rect2.top < rect.top && rect2.bottom > rect.bottom && rect2.right > rect.right) {
                                newparent = divs[i];
                                var RL = rect2.left;
                                var RT = rect2.top
                        }
                }
                if (newparent.id != oldparent.id) {
                        newparent.appendChild(drago);
                        drago.style.left = rect.left - RL + "px";
                        drago.style.top = rect.top - RT + "px";
                        if (newparent.id === "editeur") {
                                drago.style.left = rect.left -editeur.offsetLeft+ "px";
                                drago.style.top = rect.top +-editeur.offsetTop +"px";
                        }
                }
                drago.style.border = oldborder;
        }
</script>
</head>
<body>
<div id="editeur" contenteditable="true"  > 
<p>test drag : <font id=res></font></p>
<div  id="div41" style="border: 2px solid blue; left: 43px; top: 26.6px; width: 104px; height: 54px; position: absolute; z-index: 30;"  ondragstart="dragStart(event)" ondrag="dragging(event)" ondragend="relache(event)"  ondrop="return false" >div41</div>
<div  id="div40" style="border: 5px solid green; left: 115.2px; top: 101.79px; width: 186px; height: 138px; position: absolute; z-index: 30;" ondragstart="dragStart(event)" ondrag="dragging(event)" ondragend="relache(event)" ondrop="return false" >div40</div>
<div  id="div42" style="border: 3px solid cyan; left: 332.6px; top: 72.39px; width: 267px; height: 230px; position: absolute; z-index: 30;" ondragstart="dragStart(event)" ondrag="dragging(event)" ondragend="relache(event)" ondrop="return false" >div42</div>
</div>
</body>
</html>

**Beginner.** · 27/02/2018, 18h10

Oui mais comme je disais il me semble que le glisser/déposer natif a des règles qui dépendent du navigateur (je ne dis pas que c'est insurmontable bien sûr). Ca marche sur IE ok mais qu'en est-il des autres navigateurs ? C'est à voir...

Mais surtout il y a une différence comme je disais : "En plus dans ton cas tu veux que les déplacements se fassent selon une seule dimension (horizontalement) et justement je ne suis pas sûr qu'on puisse imposer cela avec le glisser/déposer natif..."...

J'ai retrouvé le fil que j'avais ouvert : Drag&Drop - Imposer une trajectoire ?

PS : Regardons aussi le code de psychadelic...

**NoSmoking** · 27/02/2018, 19h26

Bonjour,
issu de ton premier code :

Code :

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

curseur.addEventListener("ondrag", dragging, false);

il faut mettre

Code :

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

curseur.addEventListener("drag", dragging, false); // sans le on

Pourquoi utiliser le drag&drop qui n'est pas au départ fait pour cela et ne pas gérer les événements au mousedown sur le curseur ?
C'est également dommage de se priver, sauf à le gérer, du déplacement au clavier.

**Beginner.** · 27/02/2018, 19h35

Je pense aussi que ce serait mieux de tout gérer soi-même avec les événements classiques comme onmoussedown; onmoussemove et onmousseup... On peut imposer un déplacement horizotal alors que je ne sais pas si c'est possible avec le glisser/déposer natif (html5)...

Concevoir des sliders perso

JavaScript

Vue hybride

Discussions similaires

Partager

Partager