anoniem Geplaatst: 24 januari 2002 Delen Geplaatst: 24 januari 2002 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 Quote Link naar reactie
anoniem Geplaatst: 24 januari 2002 Auteur Delen Geplaatst: 24 januari 2002 [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; Quote Link naar reactie
anoniem Geplaatst: 24 januari 2002 Auteur Delen Geplaatst: 24 januari 2002 Hartsikke bedankt! Ik zal nog ff uitzoeken hoe het in netscape e.d. moet maar het werkt perfect. Tnx man! Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen