De PHPhulp kroeg
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
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
function mouseMovedLeft(e) {
if (isMousedown()) {
$('#hor').html('Links');
}
}
function mouseMovedRight(e) {
if (isMousedown()) {
$('#hor').html('Rechts');
}
}
function isMousedown() {
return mouseIsDown ? true : false;
}
if (isMousedown()) {
$('#hor').html('Links');
}
}
function mouseMovedRight(e) {
if (isMousedown()) {
$('#hor').html('Rechts');
}
}
function isMousedown() {
return mouseIsDown ? true : false;
}
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