[Javascript] versleepbaar div - Softwareontwikkeling

dinsdag 25 april 2006 11:11

Acties:

0 Henk 'm!

Anoniem: 53089

Topicstarter

Ik ben bezig om zelf een menutje te schrijven in javascript die je over het scherm heen kan slepen en kan afsluiten. Nu heb ik zelf niet zoveel ervaring met programmeren in javascript, dus wil ik graag commentaar op de opbouw en mischien dat jullie dingen anders zullen doen.

Ook werkt de code nog niet helemaal lekker in Internet Explorer, aangezien de bovenste rode balk in firefox geheel aanklikbaar is, alleen in internet explorer werkt het alleen als er tekst in de div staat, de tekst is dan ook alleen aanklikbaar.

de code

code:

<html>
<body>

<script type="text/javascript">

function geklicked() {
    this.mover = new mover;
    document.onmousemove = this.mover.move;
}

function losgelaten() {
    this.mover = null;
    document.onmousemove = null;
}

function mo() {
    this.mover = null;

    this.geklicked = geklicked;
    
    this.losgelaten = losgelaten;

}

function mover() {

    var divx = null;
    var divy = null;

    this.move = function(e) {

        var posx = 0;
        var posy = 0;
        if (!e) var e = window.event;
        if (e.pageX || e.pageY)
        {
            posx = e.pageX;
            posy = e.pageY;
        }
        else if (e.clientX || e.clientY)
        {
            posx = e.clientX + document.body.scrollLeft;
            posy = e.clientY + document.body.scrollTop;
        }
        
        var floatdiv = document.getElementById("sleep");
        
        if (!divx) {
            divx = posx - parseInt(floatdiv.style.left);
            divy = posy - parseInt(floatdiv.style.top);
        }
        
        //document.getElementById("sleep").style.position = 'absolute';
        floatdiv.style.top = posy - divy;
        floatdiv.style.left = posx - divx;
        
        document.getElementById("output1").value = posy ;
        document.getElementById("output2").value = posx;
    }
    
}

</script>

<div id="sleep" style="width: 100px; height: 200px; background-color: blue; top: 100px; left: 100px; position: absolute;">
  <div onmouseup="e.losgelaten(); e = null;" onmousedown="e = new mo; e.geklicked();" style="margin: 0px; background-color: red; cursor: pointer; text-align: right;">dafdaf
    <a onclick="document.getElementById('sleep').style.visibility='hidden'">[x]</a>
  </div>
</div>

<br />
Y: <INPUT TYPE="TEXT" id="output1" NAME="output1" >
X: <INPUT TYPE="TEXT" id="output2" NAME="output2" >

</body>
</html>

Voorbeeld;
http://www.oosterveer.com/menu/menu.htm

dinsdag 25 april 2006 12:00

Acties:

0 Henk 'm!

André

Analytics dude

1 puntje kan ik zo al aangeven, he zet deze functie in je object mover: this.move = function(e). Dat kun je beter met prototyping oplossen

Dat IE hem niet buiten de tekst pakt komt omdat je een p gebruikt, maak daar eens een div van.

[ Voor 26% gewijzigd door André op 25-04-2006 12:02 ]

dinsdag 25 april 2006 13:02

Acties:

0 Henk 'm!

Anoniem: 53089

Topicstarter

Ik heb het aangepast, dus een <div> ipv een <p>, maar dan doet het in Internet Explorer nog steeds niet.

Ik zal prototyping een opzoeken op google, aangezien ik hier absoluut geen ervaring mee heb.

Alvast bedankt voor de reactie.

Joris

[ Voor 13% gewijzigd door Anoniem: 53089 op 25-04-2006 13:03 ]

dinsdag 25 april 2006 14:21

Acties:

0 Henk 'm!

Anoniem: 53089

Topicstarter

Ik heb m aangepast, alleen gebeurt er nu iets geks. Bij de 2de keer verslepen wordt de afstand tussen links boven van de verplaatsbare div en de muispointer van de eerste keer gebruikt, dit object bestaat dus nog na het loslaten van de muisknop. Ook kan je de bovenste DIV in Internet explorer niet aanklikken?.

aangepaste code

code:

<html>
<body>

<script type="text/javascript">

function mo() {
    this.mover = null;
}

    mo.prototype.geklicked = function() {
        this.mover = new mover;
        document.onmousemove = this.mover.move;
    }

    mo.prototype.losgelaten = function() {
        this.mover = null;
        document.onmousemove = null;
    }

function mover() {

    this.divx = null;
    this.divy = null;

}

    mover.prototype.move = function(e) {

        var posx = 0;
        var posy = 0;
        if (!e) var e = window.event;
        if (e.pageX || e.pageY)
        {
            posx = e.pageX;
            posy = e.pageY;
        }
        else if (e.clientX || e.clientY)
        {
            posx = e.clientX + document.body.scrollLeft;
            posy = e.clientY + document.body.scrollTop;
        }
        
        var floatdiv = document.getElementById("sleep");
        
        if (!this.divx) {
            this.divx = posx - parseInt(floatdiv.style.left);
            this.divy = posy - parseInt(floatdiv.style.top);
        }
        
        //document.getElementById("sleep").style.position = 'absolute';
        floatdiv.style.top = posy - this.divy;
        floatdiv.style.left = posx - this.divx;
        
        document.getElementById("output1").value = posy ;
        document.getElementById("output2").value = posx;
    }
    

    </script>

<div id="sleep" style="width: 100px; height: 200px; background-color: blue; top: 100px; left: 100px; position: absolute;">
    <div onmouseup="e.losgelaten(); e = null;" onmousedown="e = new mo; e.geklicked();" style="margin: 0px; background-color: red; cursor: pointer; text-align: right;">
        <a onclick="document.getElementById('sleep').style.visibility='hidden'">[x]</a> 
    </div>
</div>

<br />
Y: <INPUT TYPE="TEXT" id="output1" NAME="output1" >

X: <INPUT TYPE="TEXT" id="output2" NAME="output2" >

</body>
</html>

dinsdag 25 april 2006 19:56

Acties:

0 Henk 'm!

twiekert

Je kan ook gebruik maken van de prototype JS library: http://prototype.conio.net/ en een effects addon, scriptaculous: http://script.aculo.us/

dan heb je het binnen 5 minuten voor elkaar met Draggable.create en Element.show & hide (of Element.toggle)

Daarnaast biedt de prototype library hele handige dingetjes voor als je meer met JS wilt gaan doen.

Reageer