CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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?

Synes godt om

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.

Synes godt om

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

Synes godt om

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 :)

Synes godt om

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!

Synes godt om

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.

Synes godt om

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å?

Synes godt om

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.

Synes godt om

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?

Synes godt om

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!

Synes godt om

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...

Synes godt om

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.

Synes godt om

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>

Synes godt om

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?

Synes godt om

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");
}
});

Synes godt om

d.kryger Praktikant

30. april 2012 - 12:14 #15

Det viker desværre ikke helt efter hensigten... Nu kan jeg slet ikke dragge...

Synes godt om

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>

Synes godt om

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?

Synes godt om

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.

Synes godt om

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?

Synes godt om

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;
}

Synes godt om

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...

Synes godt om

mireigi Novice

03. maj 2012 - 08:44 #22

Velbekomme. Har også selv lært lidt af det :)

Synes godt om

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?

Synes godt om

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?

Synes godt om

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 :)

Synes godt om

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?

Synes godt om

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.

Synes godt om

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...

Synes godt om

mireigi Novice

09. maj 2012 - 22:10 #29

Velbekomme :)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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
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
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS