Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

layer slepen?

None
3 antwoorden
  • Hallo,
    het leek mij leuk een script te maken dat de surfer in staat stelt een layer over het scherm te verplaatsen,slepen dus.
    Nu kom ik voor een paar vragen te staan:

    - moet ik nu 2 eventhandlers tegelijk gebruiken? mouseDown en MouseMove
    - hoe moet dat
    - hoe vraag ik de huidige cursorpositie op

    Als ik dit weet kan ik bij mouseMove de nieuwe top en left van de layer aangeven.
    Is dit een goede opzet?
    Benieuwd naar antwoorden en inzichten….
    Haike
  • [code:1:7785005aa1]
    <html>
    <style type="text/css">
    <!–

    #dragMe
    {
    position: absolute;
    background-color: white;
    padding: 2px;
    width: 200px;
    border: 1px black solid;
    }

    //–>
    </style>
    <body>
    <div id="dragMe">
    klik om te slepen
    </div>


    <script type="text/javascript" language="Javascript">
    <!–

    var ob;
    var magHet;
    var temp;
    var tempL;
    var TempT;
    var test;
    var theObj;

    function MouseDown(e)
    {
    // kijken welk object het is
    if(event.srcElement.id == 'dragMe'){
    ob = event.srcElement;

    // positie bepalen
    tempL = ob.style.pixelLeft;
    tempT = ob.style.pixelTop;

    X=event.offsetX;
    Y=event.offsetY;
    }
    }

    function MouseMove(e)
    {
    if (ob)
    {
    ob.style.pixelLeft = event.clientX-X + document.body.scrollLeft;
    ob.style.pixelTop = event.clientY-Y + document.body.scrollTop;
    return false;
    }
    }

    function MouseUp()
    {
    if(ob)
    ob = null;
    }

    document.onmousedown = MouseDown;
    document.onmousemove = MouseMove;
    document.onmouseup = MouseUp;

    //–>
    </script>

    </body>
    </html>

    [/code:1:7785005aa1]

    Er zitten uiteraard haken en ogen aan.
    Het is IE only, voor mozilla/netscape/opera moet je zelf even aan de slag.

    De stijlen van die div zijn wel erg belangrijk. Position: absolute moet je sowieso instellen om het werkend te krijgen. De background-color zorgt ervoor dat je overal kan klikken in de div en niet alleen op de tekst. Normaal heeft elk object in html een transparante achtergrond, maar daardoor 'klik' je er ook niet echt op. Als je een achtergrondkleur instelt kun je wel overal klikken.

    Verder moet je bedenken dat elk element in html waar je op klikt zijn eigen event heeft. Stel, ik wil binnen deze div een tabel maken, dan klik je opeens niet meer op die div, maar op die tabel! Je kunt dus beter een aparte 'drag'-handle maken. Dan wordt de code voor de 'sleeplayer' zoiets.

    [code:1:7785005aa1]
    <div id="theParent">
    <div id="dragMe">handle om te draggen, bijvoorbeeld een plaatje o.i.d.</div>
    <div id="alle tekst enz. die je wil slepen">
    bla bla <b>bla</b> etc</div>
    </div>
    [/code:1:7785005aa1]

    Dan moet je in de functie MouseDown(e):

    ob = event.srcElement.parent;

    veranderen in:

    ob = event.srcElement.parentElement;
  • Hartsikke bedankt!
    Ik zal nog ff uitzoeken hoe het in netscape e.d. moet maar het werkt perfect. Tnx man!

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.