Søg
Avatar billede hkb-x Nybegynder
02. juni 2006 - 12:47 Der er 9 kommentarer og
1 løsning

træk og slip funktion

Hvordan kan man lave en træk funktion via javascript?

Jeg vil gerne have at man kan trække divbokse rund på min side...

Når men holder venstre piletast nede på en <div> og flytter musen så skal divboksen flytte med...

Jeg har prøvet at lave det i et stykke tis men kan sgu ikke få knækket det...

Så hvordan kan man lave denne træk og slip funktion?
Avatar billede jokkejensen Novice
02. juni 2006 - 12:56 #1
psst : http://developer.yahoo.com/ypatterns/pattern.php?pattern=dragdropmodules

Yahoo har lavet et JS framework til dette.. skide godt, crossbrowser.

Keep points ...
Avatar billede jokkejensen Novice
02. juni 2006 - 12:57 #2
(siden kan være lidt svær at navigere rundt i.. men et forsøg værd :)
Avatar billede ttopholm Nybegynder
02. juni 2006 - 12:58 #3
http://www.dhtmlcentral.com/script/script.asp?id=16

Der er demo på forseiden http://www.dhtmlcentral.com
Avatar billede jokkejensen Novice
02. juni 2006 - 12:59 #4
Med yahoo har du mulighed for at lave selfhealing og grid layout..

Så du kan opnå sådanne effekter :

http://www.pageflakes.com/

og

www.start.com
Avatar billede jokkejensen Novice
02. juni 2006 - 13:01 #5
pageflakes.com skulle efter sigende være lavet i asp.net's Atlas framework..

Så hvis du kender lidt til asp.net vil det helt klart være at foretrække.
Avatar billede webstuff Nybegynder
02. juni 2006 - 13:09 #6
Noget alla det her?
http://www.cases.hotserv.dk/javascript/case007/

--Ja det er mig der har lavet det ;)
Avatar billede hkb-x Nybegynder
02. juni 2006 - 14:46 #7
@webstuff

Fedt og simpelt script... skal dog rettes lidt til... der fungerer ikke i IE
Avatar billede ttopholm Nybegynder
02. juni 2006 - 14:57 #8
Det virker fint her i IE
Avatar billede olebole Juniormester
02. juni 2006 - 17:49 #9
<ole>

Denne 'snas' er en stump, jeg engang klippede et andet sted ... den er vist oprindeligt fra DynamicDrive. Den kunne absolut være kønnere - men den funker da:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Drag eksempel</title>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.drag {
    position: relative;
    border: 2px solid red;
    background: yellow;
    padding: 3px;
    cursor: move;
}
</style>
<script type="text/JavaScript">
var ie = document.all;
var ns6 = document.getElementById && !document.all;
var dragapproved = false;
var z,x,y;

function move(e) {
    if (dragapproved) {
        z.style.left = (ns6? temp1+e.clientX-x : temp1+event.clientX-x) + "px";
        z.style.top = (ns6? temp2+e.clientY-y : temp2+event.clientY-y) + "px";
    }
    return false;
}

function drags(e) {
    if (!ie && !ns6) return;
    var firedobj = ns6? e.target : event.srcElement;
    var topelement = ns6? "HTML" : "BODY";
   
    while (firedobj.tagName!=topelement && firedobj.className!="drag") {
        firedobj = ns6? firedobj.parentNode : firedobj.parentElement;
    }
   
    if (firedobj.className=="drag") {
        dragapproved = true;
        z = firedobj;
        temp1 = parseInt(z.style.left+0);
        temp2 = parseInt(z.style.top+0);
        x = ns6? e.clientX: event.clientX;
        y = ns6? e.clientY: event.clientY;
        document.onmousemove = move;
    }
    return false;
}
document.onmousedown = drags;
document.onmouseup = function(){
    dragapproved = false;
}
</script>
</head>
<body>
<span class='drag'>Span 1</span>
<span class='drag'>Span 2</span>
<span class='drag'>Span 3</span>
</body>
</html>




/mvh
</bole>
Avatar billede webstuff Nybegynder
07. juni 2006 - 17:14 #10
Det virker også fint når jeg teser det i IE??
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 11:48 Nyåbnede sider flimrer på Android tablet, hvorfor Af annam i Andet software
I går 11:03 Bitlocker fordele-ulemper, samt nulstille PC Af Uvanga i Windows
20/0511:00 IIS på Win10 64 bit Af bsn i Webservere
20/0509:01 Bitlocker Af Chevy396 i Windows
18/0501:57 Tjek alle checkbox i form Af bsn i ASP
White papers
Flere white papers »