Mousedrag jQuery
Ik wil graag in jQuery controleren of er een mousedrag plaatsvind:
- De gebruiker klikt en beweegt de muis naar rechts
of
- De gebruiker klikt en beweegt de muis naar links
Wanneer dit het geval is moet er een actie/functie uitgevoerd worden.
Heeft iemand enig idee hoe ik dit zou moeten controleren?
Alvast bedankt!
Mvg,
Robin.
Misschien ook wel wat quick & dirty
Code (php)
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
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mouse direction</title>
</head>
<body>
<div id="hor"></div>
<div id="ver"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
// Dit houdt de muispositie bij
var currentPosition = [0, 0];
// callbacks.
// hier kan je uiteraard creatievere dingen doen
function mouseMovedLeft(e) {
$('#hor').html('Links');
}
function mouseMovedRight(e) {
$('#hor').html('Rechts');
}
function mouseMovedUp(e) {
$('#ver').html('Op');
}
function mouseMovedDown(e) {
$('#ver').html('Neer');
}
// bij laden pagina
$(document).mousemove(function(e) {
if (currentPosition[0] < e.clientX) {
mouseMovedRight(e);
}
if (currentPosition[0] > e.clientX) {
mouseMovedLeft(e);
}
if (currentPosition[1] < e.clientY) {
mouseMovedDown(e);
}
if (currentPosition[1] > e.clientY) {
mouseMovedUp(e);
}
// tijdelijke waarde vervangen door huidige waarde
currentPosition = [e.clientX, e.clientY];
});
});
</script>
</body>
</html>
<html lang="en">
<head>
<title>Mouse direction</title>
</head>
<body>
<div id="hor"></div>
<div id="ver"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
// Dit houdt de muispositie bij
var currentPosition = [0, 0];
// callbacks.
// hier kan je uiteraard creatievere dingen doen
function mouseMovedLeft(e) {
$('#hor').html('Links');
}
function mouseMovedRight(e) {
$('#hor').html('Rechts');
}
function mouseMovedUp(e) {
$('#ver').html('Op');
}
function mouseMovedDown(e) {
$('#ver').html('Neer');
}
// bij laden pagina
$(document).mousemove(function(e) {
if (currentPosition[0] < e.clientX) {
mouseMovedRight(e);
}
if (currentPosition[0] > e.clientX) {
mouseMovedLeft(e);
}
if (currentPosition[1] < e.clientY) {
mouseMovedDown(e);
}
if (currentPosition[1] > e.clientY) {
mouseMovedUp(e);
}
// tijdelijke waarde vervangen door huidige waarde
currentPosition = [e.clientX, e.clientY];
});
});
</script>
</body>
</html>
Gewijzigd op 23/05/2012 11:47:20 door Kris Peeters
@Kris: Enorm bedankt! Het werkt helemaal prima wat je hebt gemaakt! Echter heb ik nog geen idee hoe ik dit kan combineren met een mousedown (dus de bezoeker moet eerst de muis indrukken, en daarna pas naar links of rechts bewegen)
Code (php)
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
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mouse direction</title>
</head>
<body>
<div id="hor"></div>
<div id="ver"></div>
<div id="mouse"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
// We laten die globaal
$(document).ready(function(e) {
// Dit houdt de muispositie bij
var currentPosition = [0, 0];
var mouseIsDown = false;
// callbacks.
// hier kan je uiteraard creatievere dingen doen
function mouseMovedLeft(e) {
$('#hor').html('Links');
$('#mouse').html(isMousedown());
}
function mouseMovedRight(e) {
$('#hor').html('Rechts');
$('#mouse').html(isMousedown());
}
function mouseMovedUp(e) {
$('#ver').html('Op');
$('#mouse').html(isMousedown());
}
function mouseMovedDown(e) {
$('#ver').html('Neer');
$('#mouse').html(isMousedown());
}
function isMousedown() {
return mouseIsDown ? 'Down' : 'Up';
}
// bij laden pagina
$(document).mousemove(function(e) {
if (currentPosition[0] < e.clientX) {
mouseMovedRight(e);
}
if (currentPosition[0] > e.clientX) {
mouseMovedLeft(e);
}
if (currentPosition[1] < e.clientY) {
mouseMovedDown(e);
}
if (currentPosition[1] > e.clientY) {
mouseMovedUp(e);
}
// tijdelijke waarde vervangen door huidige waarde
currentPosition = [e.clientX, e.clientY];
}).mousedown(function () {
mouseIsDown = true;
}).mouseup(function () {
mouseIsDown = false;
});
});
</script>
</body>
</html>
<html lang="en">
<head>
<title>Mouse direction</title>
</head>
<body>
<div id="hor"></div>
<div id="ver"></div>
<div id="mouse"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
// We laten die globaal
$(document).ready(function(e) {
// Dit houdt de muispositie bij
var currentPosition = [0, 0];
var mouseIsDown = false;
// callbacks.
// hier kan je uiteraard creatievere dingen doen
function mouseMovedLeft(e) {
$('#hor').html('Links');
$('#mouse').html(isMousedown());
}
function mouseMovedRight(e) {
$('#hor').html('Rechts');
$('#mouse').html(isMousedown());
}
function mouseMovedUp(e) {
$('#ver').html('Op');
$('#mouse').html(isMousedown());
}
function mouseMovedDown(e) {
$('#ver').html('Neer');
$('#mouse').html(isMousedown());
}
function isMousedown() {
return mouseIsDown ? 'Down' : 'Up';
}
// bij laden pagina
$(document).mousemove(function(e) {
if (currentPosition[0] < e.clientX) {
mouseMovedRight(e);
}
if (currentPosition[0] > e.clientX) {
mouseMovedLeft(e);
}
if (currentPosition[1] < e.clientY) {
mouseMovedDown(e);
}
if (currentPosition[1] > e.clientY) {
mouseMovedUp(e);
}
// tijdelijke waarde vervangen door huidige waarde
currentPosition = [e.clientX, e.clientY];
}).mousedown(function () {
mouseIsDown = true;
}).mouseup(function () {
mouseIsDown = false;
});
});
</script>
</body>
</html>
( het quick & dirty-gehalte zal zeker niet gezakt zijn )
Gewijzigd op 23/05/2012 13:52:42 door Kris Peeters
Alvast bedankt!
Code (php)
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
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mouse direction</title>
</head>
<body>
<div id="hor"></div>
<div id="ver"></div>
<div id="mouse"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
var currentPosition = [0, 0];
var mouseIsDown = false;
function mouseMovedLeft(e) {
$('#hor').html('Links');
$('#mouse').html(isMousedown());
}
function mouseMovedRight(e) {
$('#hor').html('Rechts');
$('#mouse').html(isMousedown());
}
function isMousedown() {
return mouseIsDown ? 'Down' : 'Up';
}
$(document).mousemove(function(e) {
if (currentPosition[0] < e.clientX) {
mouseMovedRight(e);
}
if (currentPosition[0] > e.clientX) {
mouseMovedLeft(e);
}
currentPosition = [e.clientX, e.clientY];
}).mousedown(function () {
mouseIsDown = true;
}).mouseup(function () {
mouseIsDown = false;
});
});
</script>
</body>
<html lang="en">
<head>
<title>Mouse direction</title>
</head>
<body>
<div id="hor"></div>
<div id="ver"></div>
<div id="mouse"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
var currentPosition = [0, 0];
var mouseIsDown = false;
function mouseMovedLeft(e) {
$('#hor').html('Links');
$('#mouse').html(isMousedown());
}
function mouseMovedRight(e) {
$('#hor').html('Rechts');
$('#mouse').html(isMousedown());
}
function isMousedown() {
return mouseIsDown ? 'Down' : 'Up';
}
$(document).mousemove(function(e) {
if (currentPosition[0] < e.clientX) {
mouseMovedRight(e);
}
if (currentPosition[0] > e.clientX) {
mouseMovedLeft(e);
}
currentPosition = [e.clientX, e.clientY];
}).mousedown(function () {
mouseIsDown = true;
}).mouseup(function () {
mouseIsDown = false;
});
});
</script>
</body>
Eventueel dit aanpassen:
Is er nog een optie om een minimale drag afstand in te stellen? Van bijvoorbeeld 100 pixels voordat de actie uitgevoerd wordt?
Code (php)
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
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mouse direction</title>
</head>
<body>
<div id="hor"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
// We laten die globaal
$(document).ready(function(e) {
// Dit houdt de muispositie bij
var currentPosition = [0, 0];
var mouseIsDown = false;
var mouseDownPosition = false; // default: false; when mouse down, it stores that value. On mouseUp, set back to false
// callbacks.
// hier kan je uiteraard creatievere dingen doen
function mouseMovedLeft(e) {
if (isMousedown() && isTriggerd(e)) {
$('#hor').html('Links');
}
}
function mouseMovedRight(e) {
if (isMousedown() && isTriggerd(e)) {
$('#hor').html('Rechts');
}
}
function isMousedown() {
return mouseIsDown ? true : false;
}
function isTriggerd(e) {
if (mouseDownPosition == false) {
return false;
}
if ( Math.abs(mouseDownPosition[0] - e.clientX) > 100) { // absoluut verschil > 100 ?
return true;
}
return false;
}
// bij laden pagina
$(document).mousemove(function(e) {
if (currentPosition[0] < e.clientX) {
mouseMovedRight(e);
}
if (currentPosition[0] > e.clientX) {
mouseMovedLeft(e);
}
// tijdelijke waarde vervangen door huidige waarde
currentPosition = [e.clientX, e.clientY];
}).mousedown(function (e) {
mouseIsDown = true;
mouseDownPosition = [e.clientX, e.clientY];
}).mouseup(function (e) {
mouseIsDown = false;
mouseDownPosition = false;
});
});
</script>
</body>
</html>
<html lang="en">
<head>
<title>Mouse direction</title>
</head>
<body>
<div id="hor"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
// We laten die globaal
$(document).ready(function(e) {
// Dit houdt de muispositie bij
var currentPosition = [0, 0];
var mouseIsDown = false;
var mouseDownPosition = false; // default: false; when mouse down, it stores that value. On mouseUp, set back to false
// callbacks.
// hier kan je uiteraard creatievere dingen doen
function mouseMovedLeft(e) {
if (isMousedown() && isTriggerd(e)) {
$('#hor').html('Links');
}
}
function mouseMovedRight(e) {
if (isMousedown() && isTriggerd(e)) {
$('#hor').html('Rechts');
}
}
function isMousedown() {
return mouseIsDown ? true : false;
}
function isTriggerd(e) {
if (mouseDownPosition == false) {
return false;
}
if ( Math.abs(mouseDownPosition[0] - e.clientX) > 100) { // absoluut verschil > 100 ?
return true;
}
return false;
}
// bij laden pagina
$(document).mousemove(function(e) {
if (currentPosition[0] < e.clientX) {
mouseMovedRight(e);
}
if (currentPosition[0] > e.clientX) {
mouseMovedLeft(e);
}
// tijdelijke waarde vervangen door huidige waarde
currentPosition = [e.clientX, e.clientY];
}).mousedown(function (e) {
mouseIsDown = true;
mouseDownPosition = [e.clientX, e.clientY];
}).mouseup(function (e) {
mouseIsDown = false;
mouseDownPosition = false;
});
});
</script>
</body>
</html>
Zoals het nu is, ondervind ik wel nog problemen met tekst-selectie.
Ik weet niet of dat in jouw geval ook een probleem zal zijn