In het volgende code fragment heb ik voor testen een heel simpele drag-drop geimplementeerd. Dat werkt allemaal zoals verwacht.
Maar als ik in plaats van 'move' een custom cursor gebruik, werkt het alleen de eerste keer. De tweede keer verandert de cursor niet in de custom cursor.
Is dat een bekend probleem? (IE6)
(het gaat me even niet om verdere details over de drag-drop implementatie, uitsluitend over de custom cursor)
Maar als ik in plaats van 'move' een custom cursor gebruik, werkt het alleen de eerste keer. De tweede keer verandert de cursor niet in de custom cursor.
Is dat een bekend probleem? (IE6)
(het gaat me even niet om verdere details over de drag-drop implementatie, uitsluitend over de custom cursor)
code:
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
| <html>
<head>
<script language='javascript'>
var drag=0;
var object='';
// Disable unwanted IE events
function disableEvents()
{
document.body.ondrag=function () { return false; };
document.body.onselectstart=function () { return false; };
}
function mouseDown(id)
{
var copy=0;
if (document.all) {
copy=window.event.ctrlKey;
}
else {
copy=e.ctrlKey;
}
drag=(copy ? 2 : 1);
document.body.style.cursor='move';
object=id;
}
function mouseUp(id)
{
if (drag&&id=="target") {
alert(object+' was dropped on target!');
}
drag=0;
object='';
if (id!='') document.getElementById(id).style.cursor='text';
document.body.style.cursor='default';
}
function mouseOver(id)
{
if (!drag) return;
document.getElementById(id).style.cursor='move';
}
function mouseOut(id)
{
if (!drag) return;
document.getElementById(id).style.cursor='text';
}
</script>
</head>
<body onload='disableEvents();' onmouseup='mouseUp("");'>
<div id='target' onmouseover='mouseOver("target");' onmouseout='mouseOut("target");' onmouseup='mouseUp("target");'>This is the target - drop the source on me</div>
<br>
<br>
<div id='source' onmouseover='mouseOver("source");' onmouseout='mouseOut("source");' onmouseup='mouseUp("source");' onmousedown='mouseDown("source");'>This is the source - drag it and drop it on the target</div>
</body>
</html> |