Toon posts:

[JS] Bij mousemove event.srcElement.DieDaaronder krijgen

Pagina: 1
Acties:

zaterdag 7 juni 2003 21:35

Acties:

Verwijderd

Topicstarter
Ja vage topictitel, I know :P

Ik wil in een table columns gaan swappen. Bij onmousedown op de <thead> zet ik een boolean die bij onmousemove wordt gechecked. Is die true, en is er een bepaalde offsetX behaald tov van de x coordinaat ten tijde van de onmousedown, dan mag er een kopie van event.srcElement worden gemaakt die vervolgens draggable is en 50% transparant.

Nu komt het. Ik ben dus lekker aan het draggen, af en toe een slokje van mijn drankje, en wil dus bij het droppen uitlezen waar hij nou eigenlijk terecht gaat komen. Ik wil dus weten welke <td> plaats moet gaan maken voor het draggende td'tje.

event.srcElement bij onmouseup geeft de draggende layer aan. Ik moet dus eigenlijk dieper gaan zitten. Is daar out of the box nog wat voor? Dus inderdaad event.srcElement.dieDaarOnder :) Anders moet ik namelijk op init alle posities gaan bufferen, of een hittest van de draggende layer met de td eronder gaan maken.

[ Voor 9% gewijzigd door Verwijderd op 07-06-2003 21:40 ]

zaterdag 7 juni 2003 22:29

Acties:
  • McVirusS
  • Registratie: Januari 2000
  • Laatst online: 21-08 10:46

McVirusS

Ik denk dat ik het wel een beetje snap maar wellicht maak je het iets makkelijker voor mensen die je willen gaan helpen als je een URL of code post :).

zaterdag 7 juni 2003 22:36

Acties:
  • McVirusS
  • Registratie: Januari 2000
  • Laatst online: 21-08 10:46

McVirusS

Het lijkt me trouwens sterk dat er hier iets standaards voor zou bestaan.

zaterdag 7 juni 2003 22:37

Acties:

Verwijderd

Topicstarter
Ja denk het ook :D

Bij de onmouseup event moet dus de TD worden uitgelezen die onder de draggende layer ligt. Een event.srcElement geeft natuurlijk de layer aan, een event.srcElement.parentElement natuurlijk de body omdat ik de child heb gedumpt in de body. Natuurlijk kan ik door de thead.children loopen en offsets vergelijken met de layer, maar wellicht bestaat het :)

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
61
62
63
64
65
66
67
68
69
70

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <script type="text/javascript">
    // pixel offset
    startOnXCoordDiff = 3;
    
    function onmousedown_event(){
        
        thisThead = event.srcElement;
        while (thisThead.tagName != "THEAD"){
            thisThead = thisThead.parentElement;
        }
        
        document.attachEvent("onmouseup", onmouseup_event);
        document.attachEvent("onmousemove", onmousemove_event);

    }
    
    function onmouseup_event(){
        document.detachEvent("onmousemove", onmousemove_event);
    }
    
    function onmousemove_event(){
        if(event.srcElement.tagName != "DIV" && event.srcElement.tagName != "TD"){
            return;
        }
        
        if(document.getElementById('ghost')){
            document.getElementById('ghost').style.left = event.x-75;
            document.getElementById('ghost').style.top = event.srcElement.offsetTop;
        }else{
            createGhost(event.x,event.srcElement.offsetTop);
        }
    }
    
    function createGhost(x,y){
        ghost = document.createElement("DIV");
        ghost.id = 'ghost';
        ghost.style.height = 20;
        ghost.style.width = 150;
        ghost.style.backgroundColor = 'red';
        ghost.style.position = 'absolute';
        ghost.style.top = 20;
        ghost.style.left = x-75;
        ghost.innerHTML = 'drek mie';
        document.body.appendChild(ghost);
    }
    document.attachEvent("onmousedown", onmousedown_event);
    document.attachEvent("onselectstart", function(){return false;});
    </script>
</head>

<body>

<table>
    <thead>
    <tr>
        <td onclick="alert(this.offsetHeight);">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td>
        <td>ccccccccccccccccccccccccccccc</td>
        <td>ddddddddddddddddddddddddddddd</td>              
    </tr>
    </thead>
</table>

</body>
</html>

[ Voor 14% gewijzigd door Verwijderd op 07-06-2003 22:39 ]

zaterdag 7 juni 2003 22:48

Acties:
  • McVirusS
  • Registratie: Januari 2000
  • Laatst online: 21-08 10:46

McVirusS

Wil je dit alleen voor tabellen gebruiken? En wil je dan kolommen of cellen swappen? Ik denk namelijk dat je er niet onderuit komt om zelf iets van een hittest functie te schrijven of iets dergelijks; en dat kan veel sneller als je alleen maar kolommen binnen een bepaalde tabel moet swappen volgens mij.

zaterdag 7 juni 2003 22:58

Acties:

Verwijderd

Topicstarter
McVirusS schreef op 07 juni 2003 @ 22:48:
Wil je dit alleen voor tabellen gebruiken? En wil je dan kolommen of cellen swappen? Ik denk namelijk dat je er niet onderuit komt om zelf iets van een hittest functie te schrijven of iets dergelijks; en dat kan veel sneller als je alleen maar kolommen binnen een bepaalde tabel moet swappen volgens mij.
Die hittest is niet zo'n probleem. Je kunt gewoon een while loop doen totdat je de thead hebt, en hiervan door alle children loopen :) Maar dat is natuurlijk niet de snelste en mooiste manier. Ik denk zelfs dat het de enige manier is :)

Het swappen hoeft alleen voor columns gebruik te worden. Met cellIndex kan ik vervolgens de tbody mee swappen.

Er moet ook nog een sort functie inkomen, dus indexes moeten ook worden gedaan bij een swap :)

zaterdag 7 juni 2003 23:22

Acties:

Verwijderd

Topicstarter
Al opgelost :)

function onmouseup_event(){
if(document.getElementById('ghost')){
document.body.removeChild(ghost);
}
document.detachEvent("onmousemove", onmousemove_event);

}

Loop alleen nu tegen iets weirds aan. Bij de onmouseup wordt de layer verwijderd. Als ik dit voor de 2de keer doe kan die geen referentie leggen naar ghost ? En dit terwijl die toch aanwezig is.

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
61
62
63
64
65
66
67
68
69
70

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <script type="text/javascript">
    // pixel offset
    startOnXCoordDiff = 3;
    
    function onmousedown_event(){
        
        xDown = event.x;
        yDown = event.srcElement.offsetTop;
        
        thisThead = event.srcElement;
        while (thisThead.tagName != "THEAD"){
            thisThead = thisThead.parentElement;
        }
        
        document.attachEvent("onmouseup", onmouseup_event);
        document.attachEvent("onmousemove", onmousemove_event);

    }
    
    function onmouseup_event(){
        document.body.removeChild(ghost);
        document.detachEvent("onmousemove", onmousemove_event);
        
    }
    
    function onmousemove_event(){
        if(event.srcElement.tagName != "DIV" && event.srcElement.tagName != "TD"){
            return;
        }else if(document.getElementById('ghost')){
            document.getElementById('ghost').style.left = event.x-(event.srcElement.offsetWidth/2);
        }else{
            ghost = document.createElement("DIV");
            ghost.id = 'ghost';
            ghost.style.height = event.srcElement.offsetHeight;
            ghost.style.width = event.srcElement.offsetWidth;
            ghost.style.backgroundColor = 'highlight';
            ghost.style.position = 'absolute';
            ghost.style.top = yDown;
            ghost.style.left = event.x-(event.srcElement.offsetWidth/2);
            ghost.style.filter = 'alpha(opacity=50)';
            ghost.innerHTML = event.srcElement.innerHTML;
            document.body.appendChild(ghost);
        }
    }

    document.attachEvent("onmousedown", onmousedown_event);
    document.attachEvent("onselectstart", function(){return false;});
    </script>
</head>

<body style="margin:0;">

<table>
    <thead>
    <tr>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td>
        <td>ccccccccccccccccccccccccccccc</td>
        <td>ddddddddddddddddddddddddddddd</td>              
    </tr>
    </thead>
</table>

</body>
</html>

[ Voor 16% gewijzigd door Verwijderd op 07-06-2003 23:25 ]

zaterdag 7 juni 2003 23:28

Acties:
  • McVirusS
  • Registratie: Januari 2000
  • Laatst online: 21-08 10:46

McVirusS

Wilde ik net posten dat het dan wel werkt, maar het blijft raar dat het niet werkt zoals je het had.

zaterdag 7 juni 2003 23:44

Acties:

Verwijderd

Topicstarter
McVirusS schreef op 07 June 2003 @ 23:28:
Wilde ik net posten dat het dan wel werkt, maar het blijft raar dat het niet werkt zoals je het had.
Ja dat snap ik ook niet echt moet ik zeggen. De controle op het element verhelpt het, maar het zou niet nodig moeten zijn. Het element is aangemaakt, en ik zou het op zich mogen verwijderen maar toch lijkt hij hem niet te vinden. Erg vreemd.

zondag 8 juni 2003 01:05

Acties:
  • McVirusS
  • Registratie: Januari 2000
  • Laatst online: 21-08 10:46

McVirusS

Ik ben niet verder gekomen dan http://www.devslet.nl/js/swapcells.html, maar die vergelijkt dus inderdaad gewoon de verticale posities (waarbij dat kleiner dan volgens mij nog niet eens hoeft).

Ik snapte eerst niet waarom je margin op 0 had gezet, maar offsetleft pakt dus het bovenste element en kijkt naar wat de offset ten opzichte van dat element is. Best rottig, iemand een oplossing daarvoor?

zondag 8 juni 2003 01:29

Acties:

Verwijderd

Topicstarter
Virus, na een avondje hobbien heb ik dit staan :) Werkt al aardig. Code is nog een beetje zooitje, en er missen nog wat checks op srcElement etc. :)

De swapNode method kun je direct na de thead td wijziging doorvoeren op de tbody. Dus gewoon de cellIndex pakken, en dan zelfde doen voor tbody. Deze methode lijkt me tig keer sneller dan zelf arrays leggen etc.

Wat wel relaxed is, is dat je ook geen table meer hoeft aan te wijzen. Elke table is nu zeg maar swappable :) Misschien dat dat nadelen heeft, als je het nou juist net niet wil :P

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
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
101
102
103
104
105
106
107
108
109
110
111
112

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <style>
    TD{
        background-color:buttonface;
        font: menu;
        cursor:hand;
        border-left: 1px solid buttonhighlight;
        border-top: 1px solid buttonhighlight;
        border-bottom: 1px solid buttonshadow;
        border-right: 1px solid buttonshadow;
    }
    </style>
    <script type="text/javascript">
    // pixel offset
    startOnXCoordDiff = 3;
    jumpOnXCoordDiff = 30;
    
    function onmousedown_event(){
        if(event.srcElement.tagName != "DIV" && event.srcElement.tagName != "TD"){
            return;
        }

        
        xDown = event.x;
        yDown = event.srcElement.offsetTop;
        swapFrom = event.srcElement;
        
        thisThead = event.srcElement;
        while (thisThead.tagName != "THEAD"){
            thisThead = thisThead.parentElement;
        }
    
        yDown = thisThead.parentElement.offsetTop;
        
        document.attachEvent("onmouseup", onmouseup_event);
        document.attachEvent("onmousemove", onmousemove_event);

    }
    
    function onmouseup_event(){
        if(document.getElementById('ghost')){
            document.body.removeChild(ghost);
        }
        if(window.swapWith){
            swapFrom.swapNode(swapWith);
            swapFrom = null;
            swapWith = null;
        }
        document.getElementById('uparrow').style.visibility = 'hidden';
        document.detachEvent("onmousemove", onmousemove_event);
        
    }
    
    function onmousemove_event(){
        if(document.getElementById('ghost')){
            newX = event.x-(ghostOffsetWidth/2);
            
            if(newX <= thisThead.children(0).children(0).offsetLeft){
                return;
            }
            
            document.getElementById('ghost').style.left = event.x-(ghostOffsetWidth/2);
            
            for(i=0;i<thisThead.children(0).children.length;i++){
                if((document.getElementById('ghost').offsetLeft + document.getElementById('ghost').offsetWidth) >= ((thisThead.children(0).children(i).offsetLeft+jumpOnXCoordDiff)+(thisThead.children(0).children(i).offsetWidth/2))){
                    swapWith = thisThead.children(0).children(i);
                    document.getElementById('uparrow').style.visibility = 'visible';
                    document.getElementById('uparrow').style.left = thisThead.children(0).children(i).offsetLeft+thisThead.children(0).children(i).offsetWidth-5;
                    document.getElementById('uparrow').style.top = thisThead.parentElement.offsetTop+thisThead.parentElement.offsetHeight;
                }
            }
        }else{
            ghostOffsetWidth = event.srcElement.offsetWidth;
            ghost = document.createElement("DIV");
            ghost.id = 'ghost';
            ghost.style.height = event.srcElement.offsetHeight;
            ghost.style.width = event.srcElement.offsetWidth;
            ghost.style.backgroundColor = 'buttonshadow';
            ghost.style.font = 'menu';
            ghost.style.position = 'absolute';
            ghost.style.top = yDown;
            ghost.style.left = event.x-(event.srcElement.offsetWidth/2);
            ghost.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=45)';
            ghost.innerHTML = event.srcElement.innerHTML;
            document.body.appendChild(ghost);
        }
    }

    document.attachEvent("onmousedown", onmousedown_event);
    document.attachEvent("onselectstart", function(){return false;});
    </script>
</head>

<body style="margin:0;">
[img]"uparrow.gif"[/img]
<table cellspacing="0" cellpadding="2">
    <thead>
    <tr>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td>
        <td>ccccccccccccccccccccccccccccc</td>
        <td>ddddddddddddddddddddddddddddd</td>              
    </tr>
    </thead>
</table>

</body>
</html>

[ Voor 12% gewijzigd door Verwijderd op 08-06-2003 01:34 ]

zondag 8 juni 2003 01:40

Acties:
  • McVirusS
  • Registratie: Januari 2000
  • Laatst online: 21-08 10:46

McVirusS

En ik heb in mijn versie nog even een functie toegevoegd die de juiste offset uitrekent ;).

In jouw versie; volgens mij zou in theorie een THEAD ook meerdere rows als children kunnen hebben of ben ik nou gek?

Volgens mij ben jij trouwens behoorlijk IE-only bezig, dit is ook wel om te zetten naar Mozilla volgens mij.

[ Voor 45% gewijzigd door McVirusS op 08-06-2003 01:41 ]

zondag 8 juni 2003 01:56

Acties:

Verwijderd

Topicstarter
McVirusS schreef op 08 juni 2003 @ 01:40:
En ik heb in mijn versie nog even een functie toegevoegd die de juiste offset uitrekent ;).

In jouw versie; volgens mij zou in theorie een THEAD ook meerdere rows als children kunnen hebben of ben ik nou gek?

Volgens mij ben jij trouwens behoorlijk IE-only bezig, dit is ook wel om te zetten naar Mozilla volgens mij.
Ja inderdaad. Maargoed, waar zou je dan op moeten sorteren met meerdere thead's?

Wat betreft Mozilla, dat valt denk ik wel mee. Wat andere aanroepen voor offsets en een andere boxmodel :) En wellicht die swapNode, weet niet of Mozilla daar zo blij mee is.

Ik heb nog een extra ding. Nu ook met tbody sorting, en dat gaat snel.... :)

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
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <style>
    TD{
        background-color:buttonface;
        font: menu;
        cursor:hand;
        border-left: 1px solid buttonhighlight;
        border-top: 1px solid buttonhighlight;
        border-bottom: 1px solid buttonshadow;
        border-right: 1px solid buttonshadow;
    }
    </style>
    <script type="text/javascript">
    // pixel offset
    startOnXCoordDiff = 3;
    jumpOnXCoordDiff = 30;
    
    function onmousedown_event(){
        
        if(event.srcElement.tagName != "DIV" && event.srcElement.tagName != "TD"){
            return;
        }

        
        xDown = event.x;
        yDown = event.srcElement.offsetTop;
        swapFrom = event.srcElement;
        
        thisThead = event.srcElement;
        while (thisThead.tagName != "THEAD"){
            thisThead = thisThead.parentElement;
        }
    
        thisTable = thisThead;
        while (thisTable.tagName != "TABLE"){
            thisTable = thisTable.parentElement;
        }
        
        for(i=0;i<thisTable.children.length;i++){
            if(thisTable.children(i).tagName == "TBODY"){
                thisTbody = thisTable.children(i);
            }
        }
        
        yDown = thisThead.parentElement.offsetTop;
        
        document.attachEvent("onmouseup", onmouseup_event);
        document.attachEvent("onmousemove", onmousemove_event);

    }
    
    function onmouseup_event(){
        if(document.getElementById('ghost')){
            document.body.removeChild(ghost);
        }
        if(window.swapWith){
            cellFrom = swapFrom.cellIndex;
            cellTo = swapWith.cellIndex;
            // swap thead
            swapFrom.swapNode(swapWith);
            
            // swap tbody
            for(i=0;i<thisTbody.children.length;i++){
                thisTbody.children(i).children(cellFrom).swapNode(thisTbody.children(i).children(cellTo))
            }
            
            // clean up
            swapFrom = null;
            swapWith = null;
        }
        document.getElementById('uparrow').style.visibility = 'hidden';
        document.detachEvent("onmousemove", onmousemove_event);
        
    }
    
    function onmousemove_event(){
        if(document.getElementById('ghost')){
            newX = event.x-(ghostOffsetWidth/2);
            
            if(newX <= thisThead.children(0).children(0).offsetLeft){
                return;
            }
            
            document.getElementById('ghost').style.left = event.x-(ghostOffsetWidth/2);
            
            for(i=0;i<thisThead.children(0).children.length;i++){
                if((document.getElementById('ghost').offsetLeft + document.getElementById('ghost').offsetWidth) >= ((thisThead.children(0).children(i).offsetLeft+jumpOnXCoordDiff)+(thisThead.children(0).children(i).offsetWidth/2))){
                    swapWith = thisThead.children(0).children(i);
                    document.getElementById('uparrow').style.visibility = 'visible';
                    document.getElementById('uparrow').style.left = thisThead.children(0).children(i).offsetLeft+thisThead.children(0).children(i).offsetWidth-5;
                    document.getElementById('uparrow').style.top = thisThead.parentElement.offsetTop+thisThead.offsetHeight;
                }
            }
        }else{
            ghostOffsetWidth = event.srcElement.offsetWidth;
            ghost = document.createElement("DIV");
            ghost.id = 'ghost';
            ghost.style.height = event.srcElement.offsetHeight;
            ghost.style.width = event.srcElement.offsetWidth;
            ghost.style.backgroundColor = 'buttonshadow';
            ghost.style.font = 'menu';
            ghost.style.position = 'absolute';
            ghost.style.top = yDown;
            ghost.style.left = event.x-(event.srcElement.offsetWidth/2);
            ghost.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=45)';
            ghost.innerHTML = event.srcElement.innerHTML;
            document.body.appendChild(ghost);
        }
    }

    document.attachEvent("onmousedown", onmousedown_event);
    document.attachEvent("onselectstart", function(){return false;});
    </script>
</head>

<body style="margin:0;">
[img]"uparrow.gif"[/img]
<table cellSpacing=0 cellPadding=2>
        <thead>
            <tr align=center >
                <td width=150>First Name</td>
                <td width=200>Last Name</td>
                <td width=150>Gender</td>
                <td width=150>Mustage</td>
                <td width=150>Smells</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Hubba</td>
                <td>Bubba</td>
                <td>Unknown</td>
                <td>Yes</td>
                <td>Bad</td>
            </tr>
            <tr>
                <td>Coronna</td>
                <td>Tequila flavor</td>
                <td>Glass</td>
                <td>Nope</td>
                <td>Nice</td>
            </tr>
        </table>

</body>
</html>

zondag 8 juni 2003 02:13

Acties:
  • McVirusS
  • Registratie: Januari 2000
  • Laatst online: 21-08 10:46

McVirusS

Verschillen voor Mozilla:
• AttachEvent
• SwapNode

En ehm; nice :).

zondag 8 juni 2003 02:17

Acties:
  • McVirusS
  • Registratie: Januari 2000
  • Laatst online: 21-08 10:46

McVirusS

Helemaal feilloos is die versie trouwens nog niet Gordijnstok, ik zou er nog wat meer checks inbouwen :).

zondag 8 juni 2003 03:30

Acties:
  • McVirusS
  • Registratie: Januari 2000
  • Laatst online: 21-08 10:46

McVirusS

Ik heb ook nog een columnmove dingetje eraan toegevoegd, maar die werkt volgens mij redelijk hetzelfde als die van jou.

http://www.devslet.nl/js/swapcolumns.html

[ Voor 3% gewijzigd door McVirusS op 08-06-2003 03:31 ]

zondag 8 juni 2003 11:22

Acties:

Verwijderd

Topicstarter
McVirusS schreef op 08 June 2003 @ 02:17:
Helemaal feilloos is die versie trouwens nog niet Gordijnstok, ik zou er nog wat meer checks inbouwen :).
Eigenlijk is Vbscript voor dit soort zaken wat beter dan Javascript, omdat die ook nog kan volgen buiten het canvas :) Maar er moeten nog een aantal zaken extra in en inderdaad nog een hoop checks.

Die van jouw pakt overigens af en toe de swap niet? En draggen moet bij jouw plaatsvinden binnen de tabel, en niet over het document. Ik krijg ook bij draggen dat als ik over de rows heenga dat de "ghost" niet meer op de y coordinaten blijft, maar zakt.

Verder moet bij mij de onmousedown nog worden aangepast, als ik het document verlaat en daarna nogmaals onmousedown doe krijg ik bugs, maar dat was te verwachten zonder checks. Mag alleen draggen binnen een bepaalde offsetWidth - draggebied, anders kan ik straks de columns niet meer resizen.

[ Voor 23% gewijzigd door Verwijderd op 08-06-2003 11:26 ]

zondag 8 juni 2003 15:31

Acties:
  • McVirusS
  • Registratie: Januari 2000
  • Laatst online: 21-08 10:46

McVirusS

Ben wel erg benieuwd naar hele scritpt als je eenmaal klaar bent, wordt volgens mij wel leuk. En ehm, waarschijnlijk zitten er inderdaad nog wel fouten in mijn versie, was 's avonds laat en het was voor mij nog slechts een orienterend experimentje. Wel de moeite waard om door te zetten overigens ;).

zondag 8 juni 2003 15:38

Acties:

Verwijderd

Topicstarter
McVirusS schreef op 08 June 2003 @ 15:31:
Ben wel erg benieuwd naar hele scritpt als je eenmaal klaar bent, wordt volgens mij wel leuk. En ehm, waarschijnlijk zitten er inderdaad nog wel fouten in mijn versie, was 's avonds laat en het was voor mij nog slechts een orienterend experimentje. Wel de moeite waard om door te zetten overigens ;).
Ik zal het scriptje als het klaar is wel hier plaatsen :) Ik heb nog nergens een goed script kunnen vinden dat sorteren, resizen en moven van een table in een klap goed doet :) Wel grids maar die moet je definieren via javascript, en dat zuigt.

Zowiezo als ik het hier plaats kan het alleenmaar beter worden door andere mensen die hun eigen ideen hebben over de opbouw van de code, en toepassingen van tricks. Ik ben ook geen wandelende bibliotheek helaas :)

[ Voor 159% gewijzigd door Verwijderd op 08-06-2003 17:52 ]

zondag 8 juni 2003 17:53

Acties:

Verwijderd

Topicstarter
Even nieuwe hoor, wordt ander een zooitje:

Het eerste deel is klaar. Als het goed is ook geen bugs meer :) Nu dus het scrollen, sorteren en resizen nog :)


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
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <style>
    thead td{
        background-color:buttonface;
        font: menu;
        cursor:hand;
        border-left: 1px solid buttonhighlight;
        border-top: 1px solid buttonhighlight;
        border-bottom: 1px solid buttonshadow;
        border-right: 1px solid buttonshadow;
    }
    tbody td{
        background-color:white;
        font: menu;
        cursor:hand;
        border-left: 1px solid buttonhighlight;
        border-top: 1px solid buttonhighlight;
        border-bottom: 1px solid buttonshadow;
        border-right: 1px solid buttonshadow;
    }
    </style>
    <script type="text/javascript">
    // pixel offset
    startOnXCoordDiff = 3;
    jumpOnXCoordDiff = 0;
    dragDecreaseRange = 10;
    
    function onmousedown_event(){
        // only pass if element is a td inside the thead part
        if(event.srcElement.parentElement){
            if(event.srcElement.parentElement.parentElement){
                if(event.srcElement.parentElement.parentElement.tagName == "THEAD"){
        
                    // kan in principe ook event.srcElement.parentElement.parentElement worden
                    thisThead = event.srcElement.parentElement.parentElement;
                    thisTable = event.srcElement.parentElement.parentElement.parentElement;
                    for(i=0;i<thisTable.children.length;i++){
                        if(thisTable.children(i).tagName == "TBODY"){
                            thisTbody = thisTable.children(i);
                        }
                    }
                    
                    xDown = event.x;
                    yDown = getOffsetTop(event.srcElement);
                    swapFrom = event.srcElement;
            
                    // create event listeners
                    document.attachEvent("onmouseup", onmouseup_event);
                    document.attachEvent("onmousemove", onmousemove_event);
    
                }
            }
        }
    }
    
    function onmouseup_event(){
        if(document.getElementById('ghost')){
            document.body.removeChild(ghost);
        }
        if(window.swapWith){
            cellFrom = swapFrom.cellIndex;
            cellTo = swapWith.cellIndex;
            // swap thead
            swapFrom.swapNode(swapWith);
            
            // swap tbody
            for(i=0;i<thisTbody.children.length;i++){
                thisTbody.children(i).children(cellFrom).swapNode(thisTbody.children(i).children(cellTo))
            }
            
            // clean up
            swapFrom = null;
            swapWith = null;
        }
        document.getElementById('uparrow').style.visibility = 'hidden';
        document.getElementById('downarrow').style.visibility = 'hidden';
        document.detachEvent("onmousemove", onmousemove_event);
        
    }
    
    function onmousemove_event(){
        if(document.getElementById('ghost')){
            newX = event.x-(ghostOffsetWidth/2);
            
            if(newX <= getOffsetLeft(thisThead.children(0).children(0))){
                newX = getOffsetLeft(thisThead.children(0).children(0));
            }

            if(newX >= getOffsetLeft(thisThead.children(0).children(thisThead.children(0).children.length-1))){
                newX = getOffsetLeft(thisThead.children(0).children(thisThead.children(0).children.length-1));
            }
            
            document.getElementById('ghost').style.left = newX;
            
            for(i=0;i<thisThead.children(0).children.length;i++){
                if((getOffsetLeft(document.getElementById('ghost')) + document.getElementById('ghost').offsetWidth) >= ((getOffsetLeft(thisThead.children(0).children(i))+jumpOnXCoordDiff)+(thisThead.children(0).children(i).offsetWidth/2))){
                    swapWith = thisThead.children(0).children(i);
                    document.getElementById('uparrow').style.visibility = 'visible';
                    document.getElementById('uparrow').style.left = getOffsetLeft(thisThead.children(0).children(i))+thisThead.children(0).children(i).offsetWidth-5;
                    document.getElementById('uparrow').style.top = getOffsetTop(thisThead)+thisThead.offsetHeight;
                    document.getElementById('downarrow').style.visibility = 'visible';
                    document.getElementById('downarrow').style.left = getOffsetLeft(thisThead.children(0).children(i))+thisThead.children(0).children(i).offsetWidth-5;
                    document.getElementById('downarrow').style.top = getOffsetTop(thisThead)-9;
                }
            }
        }else{
            ghostOffsetWidth = event.srcElement.offsetWidth;
            ghost = document.createElement("DIV");
            
            ghost.id = 'ghost';
            ghost.style.position = 'absolute';
            ghost.style.top = yDown;
            ghost.style.left = event.x-(event.srcElement.offsetWidth/2);    
            ghost.style.height = event.srcElement.offsetHeight;
            ghost.style.width = event.srcElement.offsetWidth;
        
            ghost.style.padding = 2;
            ghost.style.textAlign = 'center';
            ghost.style.backgroundColor = 'buttonshadow';
            ghost.style.font = 'menu';
            ghost.style.cursor = 'e-resize'; //w-resize kan ook
            
            
            ghost.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=45)';
            ghost.innerHTML = event.srcElement.innerHTML;
            document.body.appendChild(ghost);
        }
    }
    
    function getOffsetTop(el) {
        tmp = 0;
        oParentElement = el;
        while(oParentElement.tagName != "BODY" ) {
            tmp += oParentElement.offsetTop;
            oParentElement = oParentElement.offsetParent;
        }
        return tmp;
    }

    function getOffsetLeft( el ) {
        tmp = 0;
        oParentElement = el;
        while( oParentElement.tagName != "BODY" ) {
            tmp += oParentElement.offsetLeft;
            oParentElement = oParentElement.offsetParent;
        }
        return tmp;
    }

    document.attachEvent("onmousedown", onmousedown_event);
    document.attachEvent("onselectstart", function(){return false;});
    </script>
</head>

<body style="margin:0;">
[img]"downarrow.gif"[/img]
[img]"uparrow.gif"[/img]
<table cellSpacing=0 cellPadding=2 style="position:absolute;top:200;left:300;">
        <thead>
            <tr align=center >
                <td width=150>First Name</td>
                <td width=200>Last Name</td>
                <td width=150>Gender</td>
                <td width=150>Mustage</td>
                <td width=150>Smells</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Hubba</td>
                <td>Bubba</td>
                <td>Unknown</td>
                <td>Yes</td>
                <td>Bad</td>
            </tr>

        </tbody>
        </table>

</body>
</html>
Pagina: 1
Reageer