Søg
Avatar billede d.kryger Praktikant
26. april 2012 - 14:13 Der er 29 kommentarer og
1 løsning

Gemme værdi fra drag and drop

Hej eksperter.

Jeg søger lidt hjælp, da jeg gerne vil lave lidt drag and drop på min side. Jeg har fundet denne side: http://www.dhtmlgoodies.com/scripts/drag-drop-custom/demo-drag-drop-3.html

Jeg vil gerne lave noget lignende, men blot skal man kunne gemme det "droppede" ned i en database (MySQL), men hvordan gør jeg det med scriptet.

Kan nogen hjælpe mig i den rigtig retning?
Avatar billede mireigi Novice
26. april 2012 - 16:06 #1
Det kan du ikke gøre med javascript.
Til det skal du bruge ASP/PHP/.NET i stedet for.
Avatar billede olsensweb.dk Ekspert
26. april 2012 - 16:21 #2
#1
det er så kun den halve sandhed, svaret må værer "Det kan du ikke gøre med javascript alene".
det kan/skal gøres med AJAX.
js kalder en stump serverside code, der ligger det i db
Avatar billede mireigi Novice
26. april 2012 - 16:26 #3
Det er vel kun i tilfælde af at det droppede skal gemmes efterhånden som det bliver droppet?

Det melder historien så ikke noget om :)
Avatar billede d.kryger Praktikant
27. april 2012 - 08:44 #4
Hej... Jeg vil gerne have at den først gemmer det til sidst, således at man kun skal kontakte databasen én gang.

Kan nogle af Jer komme med nogle kodeeksempler?

Jeg bruger selv PHP, så hvis det kan laves med noget PHP-kode, vil det bare være super!
Avatar billede Slettet bruger
27. april 2012 - 09:31 #5
PHP har intet med Drag'n'Drop at gøre.
Drag'n'Drop er noget der sker i browseren, så der er du tvunget til at bruge Javascript.

Hvis du gerne vil gemme værdierne af det du dropper i din Drag'n'Drop, uden at gøre det asynkront via AJAX, så kunne du evt. lave en usynlig formular, som du udfylder når der droppes.
Når du så er færdig, kan du submitte formularen og derfra kan du behandle dataen i PHP, som var det en helt almindelig HTML formular.
Avatar billede d.kryger Praktikant
27. april 2012 - 13:22 #6
Jeg er helt med på at jeg er "tvunget" til at bruge Javascript til Dran'n'Drop, men jeg troede bare at det var lettest at gemme det hele på én gang.

Er det nemmere at gemme ned i DB ved hvert dnd?
Hvis ja, hvordan gør man så?
Avatar billede Slettet bruger
27. april 2012 - 13:56 #7
Under alle omstændigheder, skal du have en "action" af en art, når du bruger Drag'n'Drop.

Om den action så laver et asynkront kald (AJAX) til et Server-side-script, eller om den gemmer dataen, evt. via en HTML form, er egentlig underordnet.

MySQL kan sagtens håndterer en masse små kald, så du behøver ikke at frygte at den bukker under - lige med det samme - bare fordi du fodrer den med lidt nyt data for hvert Drag'n'Drop.

Så det kommer egentlig til at ende ud i... hvad vil være mest optimalt for dig?

Ved at gemme i databasen ved hvert Drag'n'Drop, så laver man som sagt et asynkront kald (AJAX) til et Server-Side-Sprog f.eks. PHP eller ASP, hvor man "vedhæfter" den data sproget skal bruge - i dit tilfælde dataen fra Drag'n'Droppen.

Ellers kan du som sagt også samle al dataen på én ved, evt. ved at have en HTML liggende som du via Javascript udfylder "on the fly" ved hvert Drag'n'Drop.
Den formular kan du så submitte når du er færdig, som en helt amindelig HTML formular.
Avatar billede d.kryger Praktikant
27. april 2012 - 14:03 #8
Hej, Jeg har lige prøve at lave det med en HTML-formular på siden som så skal submites når man vil gemme.

Men en helt anden ting. Næste gang man så går ind på siden, så ser siden jo ud som første gang... Kan nogen hjælpe mig med at få nogle at (i mit eksempel "Hovedstæderne") til at være dragget til landet, når man loader siden?
Avatar billede Slettet bruger
27. april 2012 - 14:21 #9
Så skal du jo være kreativ! ;-)

Nu det jo lidt svært at hjælpe med noget man ikke helt konkret ved hvad er!
MEN du har vel den nye data i din database nu, så et godt bud er, du skal bruge den til at opnå hvad du vil, næste gang du loader siden!
Avatar billede d.kryger Praktikant
27. april 2012 - 14:28 #10
Jeg prøver lige at lave en simpel side, som jeg lige kan linke til... Det jeg gerne vil vide er hvor i scriptet jeg kan indsætte min data fra databasen...
Avatar billede mireigi Novice
27. april 2012 - 15:57 #11
Dit javascript skal gemme sine værdier i nogle hidden inputs. Når du så submitter siden, skal du i PHP læse fra de hidden inputs.

Jeg kan strikke noget javascript/jquery sammen senere i aften, men PHP delen må du selv rode med.
Avatar billede mireigi Novice
27. april 2012 - 21:59 #12
Det her kan gøre, hvad du vil:

Libraries
JQuery:        http://code.jquery.com/jquery-1.7.2.js
JQueryUI:    http://jqueryui.com/download


Code
Du skal selv erstatte fremhævet tekst med dine udgaver
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JQuery Drag and Drop</title>
    <script type="text/javascript" src="JQuery/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="JQuery/jquery-ui-1.8.19.custom.min.js"></script>
    <style type="text/css" media="screen">
        #Wrapper
        {
            margin: 50px auto 0;
            width: 971px;
            font-size: 0;
            text-align: center;
        }
       
        #Source, #Destination
        {
            width: 300px;
            height: 400px;
            border: 1px solid #000;
            display: inline-block;
            vertical-align: top;
            text-align: left;
        }
       
        #Source
        {
            margin-right: 40px;
        }
       
        .DragBox
        {
            width: 120px;
            height: 35px;
            border: 1px solid #000;
            display: inline-block;
            margin: 10px;
            font-weight: bold;
            background-color: #FFF;
            font-size: 15px;
            font-family: Verdana;
            text-align: center;
            padding-top: 15px;
            vertical-align: top;
        }
       
        .Green
        {
            background-color: #0F0;
        }
       
        .Blue
        {
            background-color: #00F;
        }
       
        .Orange
        {
            background-color: #FA0;
        }
       
        .Red
        {
            background-color: #F00;
        }
       
        .Pink
        {
            background-color: #FAA;
        }
       
        .Cyan
        {
            background-color: #0FF;
        }
       
        .Gray
        {
            background-color: #999;
        }
       
        .White
        {
            background-color: #FFF;
        }
    </style>
</head>
<body>
    <div id="Wrapper">
        <form id="MyForm" action="postback.php" method="post">
        <div id="Source">
            <div class="DragBox Green">
                <input type="hidden" name="GreenBox" value="0" />
                </div>
            <div class="DragBox Blue">
                <input type="hidden" name="BlueBox" value="0" />
                </div>
            <div class="DragBox Orange">
                <input type="hidden" name="OrangeBox" value="0" />
                </div>
            <div class="DragBox Red">
                <input type="hidden" name="RedBox" value="0" />
                </div>
            <div class="DragBox Pink">
                <input type="hidden" name="PinkBox" value="0" />
                </div>
            <div class="DragBox Cyan">
                <input type="hidden" name="CyanBox" value="0" />
                </div>
            <div class="DragBox Gray">
                <input type="hidden" name="GrayBox" value="0" />
                </div>
            <div class="DragBox White">
                <input type="hidden" name="WhiteBox" value="0" />
                </div>
        </div>
        <div id="Destination">
        </div>
        </form>
    </div>
    <script type="text/javascript">
        $(".DragBox").draggable({
            cursor: "move",
            stop: function ()
            {
                cursor: "default";
            }
        });

        $("#Destination").droppable(
        {
            drop: function (event, ui)
            {
                var elem = $(ui.draggable[0]);
                elem.css("left", "");
                elem.css("top", "");
                elem.appendTo(this);
                elem.children("input").val("1");
            }
        });

        $("#Source").droppable(
        {
            drop: function (event, ui)
            {
                var elem = $(ui.draggable[0]);
                elem.css("left", "");
                elem.css("top", "");
                elem.appendTo(this);
                elem.children("input").val("0");
            }
        });
    </script>
</body>
</html>
Avatar billede d.kryger Praktikant
30. april 2012 - 10:53 #13
mireigi -> Det er genialt...

Dog har jeg lige et enkelt problem... Jeg laver flere "Destination", og der skal kun kunne droppes ét element i hver "Destination"... Kan du hjælpe med at løse dette?
Avatar billede mireigi Novice
30. april 2012 - 12:06 #14
Nu har jeg ikke testet det, men dette burde virke:
  $(".DragBox").draggable({
            cursor: "move",
            stop: function ()
            {
                cursor: "default";
            },
            start: function(event, ui)
            {
                this.parent().droppable("enable");
            }
        });

        $("#Destination").droppable(
        {
            drop: function (event, ui)
            {
                var elem = $(ui.draggable[0]);
                elem.css("left", "");
                elem.css("top", "");
                elem.appendTo(this);
                elem.children("input").val("1");
                this.droppable("disable");
            }
        });
Avatar billede d.kryger Praktikant
30. april 2012 - 12:14 #15
Det viker desværre ikke helt efter hensigten... Nu kan jeg slet ikke dragge...
Avatar billede mireigi Novice
30. april 2012 - 13:18 #16
Der var en lille fejl, men det er rettet nu.
Her er hele koden, og det virker. Er testet :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ (...)
<html xmlns="http://www.w3.org/ (...)
<head>
    <title>JQuery Drag and Drop</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.19.custom.min.js"></script>
    <style type="text/css" media="screen">
        #Wrapper
        {
            margin: 50px auto 0;
            width: 971px;
            font-size: 0;
            text-align: center;
        }
     
        .DragSource, .DestinationWrapper
        {
            width: 300px;
            height: 400px;
            border: 1px solid #000;
            display: inline-block;
            vertical-align: top;
            text-align: left;
            margin-right: 40px;
        }
       
        .DestinationWrapper
        {
            border: none;
        }
       
        .DragSource
        {
            margin-right: 40px;
        }
       
        .DragDestination
        {
            width: 300px;
            height: 190px;
            border: 1px solid #000;
            display: block;
            vertical-align: top;
            text-align: left;
        }
       
        .DragDestination:first-child
        {
            margin-bottom: 20px;
        }
     
        .DragBox
        {
            width: 120px;
            height: 35px;
            border: 1px solid #000;
            display: inline-block;
            margin: 10px;
            font-weight: bold;
            background-color: #FFF;
            font-size: 15px;
            font-family: Verdana;
            text-align: center;
            padding-top: 15px;
            vertical-align: top;
            cursor: move;
        }
     
        .Green
        {
            background-color: #0F0;
        }
     
        .Blue
        {
            background-color: #00F;
        }
     
        .Orange
        {
            background-color: #FA0;
        }
     
        .Red
        {
            background-color: #F00;
        }
     
        .Pink
        {
            background-color: #FAA;
        }
     
        .Cyan
        {
            background-color: #0FF;
        }
     
        .Gray
        {
            background-color: #999;
        }
     
        .White
        {
            background-color: #FFF;
        }
    </style>
</head>
<body>
    <div id="Wrapper">
        <form id="MyForm" action="postback.php" method="post">
        <div class="DragSource">
            <div class="DragBox Green">
                <input type="hidden" name="GreenBox" value="0" />
                </div>
            <div class="DragBox Blue">
                <input type="hidden" name="BlueBox" value="0" />
                </div>
            <div class="DragBox Orange">
                <input type="hidden" name="OrangeBox" value="0" />
                </div>
            <div class="DragBox Red">
                <input type="hidden" name="RedBox" value="0" />
                </div>
            <div class="DragBox Pink">
                <input type="hidden" name="PinkBox" value="0" />
                </div>
            <div class="DragBox Cyan">
                <input type="hidden" name="CyanBox" value="0" />
                </div>
            <div class="DragBox Gray">
                <input type="hidden" name="GrayBox" value="0" />
                </div>
            <div class="DragBox White">
                <input type="hidden" name="WhiteBox" value="0" />
                </div>
        </div>
        <div class="DestinationWrapper">
            <div class="DragDestination">
            </div>
            <div class="DragDestination">
            </div>
        </div>
        </form>
    </div>
    <script type="text/javascript">
        $(".DragBox").draggable({
            start: function ()
            {
                $(this).parent().droppable("enable");
            },
            revert: true
        });

        $(".DragDestination").droppable(
        {
            drop: function (event, ui)
            {
                var elem = $(ui.draggable[0]);
                elem.css("left", "");
                elem.css("top", "");
                elem.appendTo(this);
                elem.children("input").val("1");
                $(this).droppable("disable");
            }
        });

        $(".DragSource").droppable(
        {
            drop: function (event, ui)
            {
                var elem = $(ui.draggable[0]);
                elem.css("left", "");
                elem.css("top", "");
                elem.appendTo(this);
                elem.children("input").val("0");
            }
        });
    </script>
</body>
</html>
Avatar billede d.kryger Praktikant
02. maj 2012 - 14:04 #17
Det er bare super - 10-4...

Jeg har kun et lille ønske. Når man første gang trækker en boks over, så er boksen bag ved de andre bokse. Men hvis man trækker med en boks der har været droppet, så vises den henover de andre bokse... Kan den ikke sættes til altid at være ovenover de andre bokse?
Avatar billede mireigi Novice
02. maj 2012 - 14:16 #18
Er det med mit eksempel at du har det, eller er det, når du bruger koden sammen med dit eget?

Jeg har nemlig ikke den problematik i mit eksempel.
Avatar billede d.kryger Praktikant
02. maj 2012 - 15:38 #19
Hvis jeg blot kopierer din kode og sætter ind på en side, så kommer "fejlen".

Jeg har dog lige prøve mig lidt frem og problemet kommer kun hvis man dragger på en boks som er før de andre bokse... Altså hvis du dragger den grønne så kommer det på alle bokse og hvis du dragger den graa, så fremkommer det kun når du passerrer den hvide boks... Der er ingen problemer med den hvide boks, som jo er den sidste...

Kan du fremprovokerer "fejlen" nu? Og kan du hjælpe med at løse det?
Avatar billede mireigi Novice
02. maj 2012 - 19:11 #20
Nå, på den måde :)

Skulle lige være med på, hvad du mente.

Hvis du tilføjer denne kode i din CSS, er problemet løst:
.ui-draggable-dragging
{
    z-index: 999;
}
Avatar billede d.kryger Praktikant
03. maj 2012 - 08:09 #21
Det er klasse... Vil du ikke ligge et svar, så vil jeg kaste nogle point i din retning...
Avatar billede mireigi Novice
03. maj 2012 - 08:44 #22
Velbekomme. Har også selv lært lidt af det :)
Avatar billede d.kryger Praktikant
03. maj 2012 - 13:47 #23
Lige et tillægs spørgsmål: Jeg har flere "input"-felter i min dragbox, og når jeg dragger med dem, så bliver alle "input"-felter opdateret med enten 0 eller 1... Kan det defineres til kun at være det ene felt?
Avatar billede d.kryger Praktikant
08. maj 2012 - 13:10 #24
Hej igen... Glem #23, den har jeg fixet :)

Men jeg er løbet ind i et lille problem (nogle vil kalde det en udfordring)...

Se denne side: http://test.kryger.name/test.php

Problemet er at når jeg har valgt et standard element i en DragDestination (i dette tilfælde det grønne element), så kan jeg godt tilføje endnu et element til samme DragDestination. Dette vil jeg gerne have ikke skulle være muligt. Kan du hjælpe med dette?
Avatar billede mireigi Novice
08. maj 2012 - 17:56 #25
        $(".DragDestination").droppable(
        {
            drop: function (event, ui)
            {
                var elem = $(ui.draggable[0]);
                elem.css("left", "");
                elem.css("top", "");
                elem.appendTo(this);
                elem.children("input").val("1");
                $(this).droppable("disable");
            }
        });


Det skulle den del gerne gøre det :)
Avatar billede d.kryger Praktikant
09. maj 2012 - 08:26 #26
Hej igen...

Koden i #25 er den samme som er på min testside (http://test.kryger.name/test.php).

Gør jeg noget forkert?
Avatar billede mireigi Novice
09. maj 2012 - 10:02 #27
Det er fordi boksen allerede har et element i sig.

Denne kode burde kunne klare det for dig:

$(".DragDestination").each(function()
{
  if ($(this).children(".DragBox").length > 0)
  {
      $(this).droppable("disable");
  }
});


Den skal du bare placere under de andre scripts.
Avatar billede d.kryger Praktikant
09. maj 2012 - 14:18 #28
Jamen, det er jo klasse... Så virker det igen :) Endnu engang mange tak for din hjælp...
Avatar billede mireigi Novice
09. maj 2012 - 22:10 #29
Velbekomme :)
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
Å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
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Returner ikke alt Af ingeman i JavaScript 13 26/06/202414:40 01/07/202417:00
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 07:57 Pludselig begyndte min computer at larme Af lenej i PC
02/1117:28 Tekst format i Kodevinduet Af per2edb i Access
02/1116:55 Et pludselig opstået ikon på skrivebordet Af ErikHg i Windows
02/1110:32 Asus R565 legetøj Af Svend_J i PC
01/1118:59 Ang fifa 26 til Ps5 Af made18 i Andet software
White papers
Flere white papers »