[JS] Events & Drag (Was: functie veranderen in javascript)

[DutchTux]

Ik zit een Window System aan het maken met Dhtml en Javascript.
Nou heb ik een script gemaakt dat je Dynamisch een Window kan laten maken.
Maar nu het volgende probleem is dat ik niet via Javascript een functie kan instellen voor onmousedown en onmouseup.
Ik heb geprobeert met object.onmousedown en object.onmouseup en met object.setattribute maar dat werkt ook niet
als ik het zonder " doet dan worden ze aangezet maar dat wil ik niet.

hier heb ik alle Javascripting, het probleem is alles dat met // voor zit. Dat werkt niet

code:

var dragapproved=false
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
var DragWindow

function iecompattest(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}

function stopdrag(WindowID){
dragapproved=false;
document.getElementById(WindowID).onmousemove=null;
document.getElementById(WindowID).style.filter = "Alpha(Opacity=100)"
// document.getElementById("dwindowcontent").style.display="" //extra
}

function drag_drop(e){
if (ie5&&dragapproved&&event.button==1){
document.getElementById(DragWindow).style.left=tempx+event.clientX-offsetx+"px"
document.getElementById(DragWindow).style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
document.getElementById(DragWindow).style.left=tempx+e.clientX-offsetx+"px"
document.getElementById(DragWindow).style.top=tempy+e.clientY-offsety+"px"
}
}

function initializedrag(e,WindowID){
offsetx=ie5? event.clientX : e.clientX
offsety=ie5? event.clientY : e.clientY
// document.getElementById("dwindowcontent").style.display="none" //extra
tempx=parseInt(document.getElementById(WindowID).style.left)
tempy=parseInt(document.getElementById(WindowID).style.top)

dragapproved=true
DragWindow=WindowID
document.getElementById(WindowID).style.filter = "Alpha(Opacity=80)"
document.getElementById(WindowID).onmousemove=drag_drop
}

function OpenWindow(WindowID){
    document.getElementById(WindowID).style.display=""
}

function CloseWindow(WindowID){
    document.getElementById(WindowID).style.display="none"
}

function MakeWindow(WindowID, Title, ContentID) {
    this.newWindow = document.createElement("div");
    this.newWindow.setAttribute("id", WindowID);
    this.newWindow.setAttribute("onSelectStart","return false");
    this.newWindow.className = "WindowArea";
    this.newWindow.onSelectStart = "return false";
    this.newWindow.style.width = "320px";
    this.newWindow.style.height = "200px";
        
    this.newWindowTitle = document.createElement("div");
    this.newWindowTitle.className = "WindowTitle";
        
//  this.newWindowTitle.setAttribute("onMouseup", stopdrag(WindowID), false);   
//  this.newWindowTitle.onMouseDown = "initializedrag(event ," + WindowID + ")";
//  this.newWindowTitle.onMouseUp = "stopdrag(" + WindowID + ")";
//  this.newWindowTitle.onMouseDown = initializedrag(event , WindowID);
//  this.newWindowTitle.onMouseUp = stopdrag(WindowID);

    this.newWindowTitle.innerHTML = "[img]'gfx/close.gif'[/img] " + Title;
    this.newWindowTitle.onSelectStart = "return false"; 
    this.newWindow.appendChild(this.newWindowTitle);
    
    this.newWindowWorkspace = document.createElement("div");
    this.newWindowWorkspace.className = "WindowWorkspace";  
    this.newWindowWorkspace.innerHTML = ContentID;
    this.newWindow.appendChild(this.newWindowWorkspace);
    
    document.body.appendChild(this.newWindow);
}

En zo maak je een venster aan

code:

MakeWindow('TestWin','Testing Dynamic Window', 'Content not found!')

Kan me iemand me alsjeblieft met dit helpen zodat ik dynamisch gemaakte venster kan laten verschuiven in de pagina.

[Clay]

de onmouse events moet je in lowercase definieren, en het zijn events, dus je moet er eenfunctie referentie aanhangen die bij dat event uitgevoerd moeten worden, ala:

JavaScript:

window.onload = function() {
    var div = document.body.appendChild(document.createElement('div'));
    div.className = 'fiets';

    div.onmouseover = function(e) {
        this.style.backgroundColor = '#fffff0';
    }

    div.onmouseout = function(e) {
        this.style.backgroundColor = '#f0f0f0';
    }
}

_{ff zelf wat definieren voor .fiets}

Je hangt er nu afwisselend Strings, en de uitkomst van functies aan, en die zijn niet uitvoerbaar voor het event (tenzij de functie een functie returnt dan), je doet dus nu in feite dit:

JavaScript:

test = "hoi()";
test();

Events errorren hier blijkbaar niet op, maar als je dit zo uitvoert errort het wel degelijk.

[DutchTux]

Bedankt Clay, maar nu weet ik niet hoe ik "event" niet doorheen, zeg dat event niet gedefineerd is.
Hoe krijg ik dit voor elkaar?

Ik heb nu dit:

code:

    this.newWindowTitle.onmousedown = function(e) {
        initializedrag(event, WindowID);
    }

    this.newWindowTitle.onmouseup = function(e) {
        stopdrag(WindowID);
    }

voor de rest is niks verandert.

[edit] effe spell checked.

[ Voor 8% gewijzigd door DutchTux op 28-09-2003 12:17 ]

[Clay]

event is in IE een globale variabele, die hoef je niet handmatig door te geven. Die e is voor moz (wat je zelf ook al gebruikt), die kan/moet je wel doorgeven.

[DutchTux]

A jah, Op een of andere manier geef aan dat een argument niet gedefineerd is en mozilla zegt hij dat het geen error is.
Ik kan de Venster die ik gemaakt niet bewegen over de pagina.

code:

var dragapproved=false
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
var DragWindow

function iecompattest(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}

function stopdrag(WindowID){
dragapproved=false;
document.getElementById(WindowID).onmousemove=null;
document.getElementById(WindowID).style.filter = "Alpha(Opacity=100)"
// document.getElementById("dwindowcontent").style.display="" //extra
}

function drag_drop(e){
if (ie5&&dragapproved&&event.button==1){
document.getElementById(DragWindow).style.left=tempx+event.clientX-offsetx+"px" # - geeft error
document.getElementById(DragWindow).style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
document.getElementById(DragWindow).style.left=tempx+e.clientX-offsetx+"px"
document.getElementById(DragWindow).style.top=tempy+e.clientY-offsety+"px"
}
}

function initializedrag(e,WindowID){
offsetx=ie5? event.clientX : e.clientX
offsety=ie5? event.clientY : e.clientY
// document.getElementById("dwindowcontent").style.display="none" //extra
tempx=parseInt(document.getElementById(WindowID).style.left)
tempy=parseInt(document.getElementById(WindowID).style.top)
dragapproved=true
DragWindow=WindowID
document.getElementById(WindowID).style.filter = "Alpha(Opacity=80)"
document.getElementById(WindowID).onmousemove=drag_drop
}

function OpenWindow(WindowID){
    document.getElementById(WindowID).style.display=""
}

function CloseWindow(WindowID){
    document.getElementById(WindowID).style.display="none"
}

function MakeWindow(WindowID, Title, ContentID) {
    this.newWindow = document.createElement("div");
    this.newWindow.setAttribute("id", WindowID);
    this.newWindow.setAttribute("onSelectStart","return false");
    this.newWindow.className = "WindowArea";
    this.newWindow.style.width = "640px";
    this.newWindow.style.height = "480px";
    this.newWindow.OnSelectStart = function() { return false };
        
    this.newWindowTitle = document.createElement("div");
    this.newWindowTitle.className = "WindowTitle";
        
    this.newWindowTitle.onmousedown = function(e) {
        initializedrag(event, WindowID);
    }

    this.newWindowTitle.onmouseup = function() {
        stopdrag(WindowID);
    }

    this.newWindowTitle.innerHTML = "[img]'gfx/close.gif'[/img] " + Title;

    this.newWindow.appendChild(this.newWindowTitle);
    
    this.newWindowWorkspace = document.createElement("div");
    this.newWindowWorkspace.className = "WindowWorkspace";  
    this.newWindowWorkspace.innerHTML = ContentID;
    this.newWindow.appendChild(this.newWindowWorkspace);
    
    document.body.appendChild(this.newWindow);

}

Ik heb achter de regel een # gezet zodat je weet waar de error komt.

[ Voor 16% gewijzigd door DutchTux op 28-09-2003 13:23 ]

[McVirusS]

Probeer anders eens op die error regel de waarde die je wilt setten te echo-en (alert of window.status is handig daarvoor ), krijg je dan wel juiste waarde terug? En wellicht is het een idee om om de berekening ( ) te zetten aangezien je nu numerieke en alfanumeriek waardes bij elkaar aan het optellen en aftrekken bent (gaat meestal wel goed maar netjes is anders).

[ Voor 14% gewijzigd door McVirusS op 28-09-2003 14:10 ]

[Clay]

het zit denk ik in de parseint voor tempx en y. de style.left en style.top kan je in IE niet uitlezen als ze uit de css komen, dat geeft niets terug. met currentStyle.left en top kan het wel, maar daar doet moz niet aan. En je paast nog steeds de event mee in de mousedown op de title, met initalizedrag(e || event, WindowID); werkt dat ook al beter.

[crisp]

Een paar opmerkingen (positief bedoelt hoor )
-Ik ben niet zo te spreken over de manier van coderen, inspringen en regels netjes met ; afsluiten maakt het al een stuk leesbaarder
-De manier van browsersniffing die gebruikt wordt is eigenlijk een beetje achterhaald, als je geen IE4 en NS4 ondersteuning in wilt/moet bouwen zou ik het gewoon volgens de DOM standaard doen, en in sommige gevallen gewoon kijken of bepaalde methoden / properties bestaan en daar je code op aanpassen.
-Waarom de lookups met getElementById als je binnen een eventhandler gewoon met het keyword this naar het element kan verwijzen?

klein voorbeeldje ter illustratie:

JavaScript:

function createElement() {

  var newDiv = document.createElement('div');
  newDiv.className = 'myClass';
  if (typeof document.addEventListener != 'undefined') {  // DOM level 2
    newDiv.addEventListener('mousedown', mouseHandler, true);
  } else if (typeof document.attachEvent != 'undefined') {  // IE 5 event model
    newDiv.attachEvent('onmousedown', mouseHandler);
  } else { // IE4 event model
    newDiv.onmousedown = mouseHandler;
  }

  if (typeof document.documentElement != 'undefined') {
    document.documentElement.appendChild(newDiv);
  } else {
    document.body.appendChild)newDiv);
  }

}

function mouseHandler(e) {

  if (typeof e == 'undefined' && typeof window.event != 'undefined') {
    e = window.event;
  }

  var x = e.clientX;
  var y = e.clientY;
  this.style.backgroundColor = 'red';

}

dit is wel heel uitgebreid en defensief geprogrammeerd, rekening houdend met de guidelines voor strict javascript compliance, maar het illustreerd wel dat je eigenlijk geen browsersniffing nodig hebt.
Verder zou ik het gebruik van innerHTML ook willen afraden als het enkel gaat om het toevoegen van een image of wat text aan een element, maak dan gewoon een textNode of een nieuw child-element aan binnen dat element mbv de DOM methods

[DutchTux]

Ik denk dat je gelijk in dat heb.
Ik heb het script eigenlijk ook van een site vandaan en aangepast zodat het meer venster te gelijk kan gebruiken.

Ik zal het helemaal opnieuw proberen te schrijven maar dit als Reference gebruiken.
Messchien lost dit wel heel wat problemen op

[DutchTux]

Heb nu alles helemaal hergeprogrameert en het werkt nu...Alleen een IE (Beetje hokkend maar het werkt)

In mozilla geeft hij een error: E has no properties aan in de functie BeginWindowMove.
Zover ik het kan zien is niks mis mee.

Weet iemand een oplossing voor?

code:

var NWinX=32;
var NWinY=32;
var approved=false;
var offsetX=0;
var offsetY=0;
var tempX=0;
var tempY=0;
var DragWindow;

function WindowDrag(e) {
    if (typeof e == 'undefined' && typeof window.event != 'undefined') {
        e = window.event;
    }
    if (approved) {
        var Window = document.getElementById(DragWindow);
        Window.style.left=tempX+e.clientX-offsetX+"px"
        Window.style.top=tempY+e.clientY-offsetY+"px"
    }
}

function BeginWindowMove(WindowID, e) {
    if (typeof e == 'undefined' && typeof window.event != 'undefined') {
        e = window.event;
    }
    offsetX = e.clientX
    offsetY = e.clientY
    var Window = document.getElementById(WindowID);
    tempX=parseInt(document.getElementById(WindowID).style.left)
    tempY=parseInt(document.getElementById(WindowID).style.top)
    approved=true;
    Window.style.filter = "Alpha(Opacity=50)";
    DragWindow = WindowID;
    Window.onmouseover = WindowDrag;
}

function StopWindowMove(WindowID) {
    var Window = document.getElementById(WindowID);
    approved=false;
    Window.style.filter = "Alpha(Opacity=100)"; 
    Window.onmouseover = null;
}

function MakeWindow(WindowID, Title,ContentID) {
    var NewWindow = document.createElement("div");
    NewWindow.setAttribute("id", WindowID);
    NewWindow.className = "WindowArea";
    NewWindow.style.width = "320px";
    NewWindow.style.height = "200px";
    NewWindow.style.top = NWinY;
    NewWindow.style.left = NWinX;
    NewWindow.onSelectStart = function() { return false };  
    
    var NewWindowTitle = document.createElement('div');
    NewWindowTitle.className = "WindowTitle";   
    NewWindowTitle.innerHTML = Title
    NewWindowTitle.OnSelectStart = function() { return false };

    NewWindowTitle.onmousedown = function(e) {
        BeginWindowMove(WindowID);
    }
    NewWindowTitle.onmouseup = function() {
        StopWindowMove(WindowID);
    }

    NewWindow.appendChild(NewWindowTitle);
    NewWindow.setAttribute("onSelectStart","return false");
    NewWindow.OnSelectStart = function() { return false };
    
    var NewWindowContent = document.createElement('div');
    NewWindowContent.className = "WindowWorkSpace"; 
    NewWindowContent.innerHTML = ContentID
    
    NewWindow.appendChild(NewWindowContent);
                
    document.body.appendChild(NewWindow);
    
    NWinY = NWinY + 18;
    NWinX = NWinX + 18;
}

[crisp]

je moet het event ook wel doorgeven:

JavaScript:

NewWindowTitle.onmousedown = function(e) {
    BeginWindowMove(WindowID,e);
}
NewWindowTitle.onmouseup = function() {
    StopWindowMove(WindowID,e);
}

Verder is het niet slim om een variabele Window te noemen omdat het erg lijkt op het bestaande window.
Verder zou ik aanraden om consequent je regels met een ; af te sluiten en ook consequent " of ' te gebruiken, en ben je je ervan bewust dat style-filters IE-only zijn?
Ook als je bijvoorbeeld de top of left style-property zet, geef dan ook de maataanduiding aan (px)

[ Voor 50% gewijzigd door crisp op 29-09-2003 09:22 ]

[DutchTux]

jah dat heb ik door...Verander wel later als alles een beetje goed wilt werken