Avatar billede TiHs Nybegynder
14. maj 2008 - 15:53 Der er 9 kommentarer og
1 løsning

drag and drop div

Hvis man nu har et script som på følgende side:

http://developer.yahoo.com/yui/examples/dragdrop/dd-region.html

hvor man kan flytte rundt på nogle divs (f.eks. 11 spillere på et hold) .. kan man så via php gemme den opstilling så den bliver
på positionen næste gang man loader siden ?
Avatar billede ep_13 Nybegynder
14. maj 2008 - 17:25 #1
Det ville nok være nemmest i en MySQL db.

/ep
Avatar billede TiHs Nybegynder
14. maj 2008 - 18:00 #2
Okay ... har du en ide til hvor jeg kan finde noget om hvordan
jeg så laver disse moveable div og får dem til at snakke sammen
med min mysql database ?
Avatar billede fant0mas Nybegynder
14. maj 2008 - 23:21 #3
Kig her:
http://script.aculo.us/

Måske skulle du overveje om det var lige så fint med for eksempel 30 eller 40 (ved ikke så meget om fodbold) faste pladser at trække spillere ind på. Rent strukturerings mæssigt, ville det i hvert fald være lettere at behandle.
Men det andet er bestemt også muligt.
Avatar billede olebole Juniormester
17. maj 2008 - 01:11 #4
<ole>

Jeg ville nu nok foretrække at lave det i valid kode i stedet  =)

timhs >> Hvordan havde du tænkt dig, det skulle fungere? Hvad skal der være af info udover positionerne ... brugerens navn, f.eks? Skal brugeren være logget ind? I så fald skal du jo også have et brugersystem af en slags

/mvh
</bole>
Avatar billede olebole Juniormester
17. maj 2008 - 01:20 #5
- hvilken PHP version understøtter din server?
Avatar billede TiHs Nybegynder
17. maj 2008 - 09:37 #6
PHP4 & 5 .... lige nu kører jeg med 4 .....
Du kan iøvrigt se den beskrivelse jeg lavede i den anden kategori. Har lige indlagt den.
Avatar billede olebole Juniormester
17. maj 2008 - 21:25 #7
Hvis du har en DB 'teams', kan du lave en tabel som denne:

CREATE TABLE setups (
  user char(20) NOT NULL DEFAULT '0' ,
  choords char(100) NOT NULL DEFAULT '0' ,
  UNIQUE KEY user (user)
);

Derudover skal du bruge et login system, som sætter en session med en variabel 'userName'. Led lidt på Eksperten, der er masser - og der ligger sikkert også en artikel eller to under PHP-artkler.

Nu kan du lave et dokument noget lignende dette:

<?php

// Tjek, om brugeren er logget ind her

$conn = mysql_connect("server", "username", "password") or die (mysql_error());
$db = mysql_select_db("teams", $conn);

if (isset($_POST["contxt"]) && $_POST["contxt"]=="savePlayerPositions") {
    $sPlyrChoords = $_POST["plyrpos"];
    $sql = "INSERT INTO `setups` (`user`, `choords`) VALUES ('".$_SESSION["userName"]."', '".$sPlyrChoords."')";
    @mysql_query($sql);
    if (mysql_errno()==1062) {
        $sql = "UPDATE `setups` SET `choords` = '".$sPlyrChoords."' WHERE `user`='".$_SESSION["userName"]."' LIMIT 1";
        mysql_query($sql) or die (mysql_error()."<br>".$sql);
    }
} else {
    $sql = "SELECT `choords` FROM `setups` WHERE `user`='".$_SESSION["userName"]."' LIMIT 1";
    $res = mysql_query($sql) or die (mysql_error());
    $row = mysql_fetch_assoc($res);
    $sPlyrChoords = $row["choords"];
    if ($sPlyrChoords=="") $sPlyrChoords = "0,0|60,0|120,0|180,0|240,0|300,0|360,0|420,0|480,0|540,0|600,0";
}

$aPos = explode("|", $sPlyrChoords);
$sPlayerPositions = "";
for ($i=0,$j=count($aPos); $i<$j; $i++) {
    $aCss = explode(",", $aPos[$i]);
    $sPlayerPositions .= "<div style='left:".($aCss[0])."px;top:".($aCss[1])."px' id='plyr_".($i+1)."' class='player'>".($i+1)."</div>";
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Set Players</title>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font: 0.85em verdana, sans-serif;
}
#playerCont {
    position: relative;
    width: 800px;
    height: 400px;
    background: green;
}
.player {
    position: absolute;
    width: 50px;
    height: 38px;
    padding-top: 12px;
    background: yellow;
    font: bold 20px arial, sans-serif;
    text-align: center;
    cursor: move;
}
</style>
<script type="text/javascript">
function dragDown(e) {
    e = e ? e : window.event;
    var oPlyr = e.target||e.srcElement;
    aMax = [oCont.offsetWidth-oPlyr.offsetWidth, oCont.offsetHeight-oPlyr.offsetHeight];
    oPlyr.setAttribute("clPoint", (e.clientX-oPlyr.offsetLeft)+","+(e.clientY-oPlyr.offsetTop));
    oActPlyr = oPlyr;
}
function playerMove(e) {
    if (!oActPlyr) return;
    e = e ? e : window.event;
    var aClPoint = oActPlyr.getAttribute("clPoint").split(",");
    var css = oActPlyr.style;
    var nX = e.clientX-aClPoint[0], nY = e.clientY-aClPoint[1];
    css.left = (nX<0 ? 0 : nX>aMax[0] ? aMax[0] : nX) + "px";
    css.top = (nY<0 ? 0 : nY>aMax[1] ? aMax[1] : nY) + "px";
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;
    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;
}
function playerDisable() {
    oActPlyr = null;
}
function saveResult(oF) {
    var oPlyr, aPlyrs = oCont.getElementsByTagName("div");
    var aPlyrPos = [];
    for (var i=1; i<12; i++) { // tallet 5 rettes til 12, når der er 11 spillere
        oPlyr = document.getElementById("plyr_" + i);
        aPlyrPos.push(oPlyr.offsetLeft + "," + oPlyr.offsetTop);
    }
    oF.plyrpos.value = aPlyrPos.join("|");
    return true;
}

var oCont = oPos = oActPlyr = aMax = null;
window.onload = function(){
    oCont = document.getElementById("playerCont");
    var aDiv = oCont.getElementsByTagName("div");
    for (var i=0; i<11; i++) aDiv[i].onmousedown = dragDown;
    document.onmousemove = playerMove;
    document.onmouseup = playerDisable;
}
</script>
</head>
<body>

<div style="padding:50px">

<div id="playerCont">
<?php
print $sPlayerPositions;
?>
</div>
<form action="" method="post" onsubmit="return saveResult(this)">
<input type="hidden" name="contxt" value="savePlayerPositions">
<input type="hidden" name="plyrpos">
<button type="submit">Gem positioner</button>
</form>

</div>

</body>
</html>

- og alle andre kan se opstillingen med dokumentet her, hvis det kaldes med:
    'http://www.domain.dk/sti/til/showplayer.php?userName=OleBole'

<?php
$db = mysql_connect("server", "username", "password") or die (mysql_error());
mysql_select_db("teams", $db);
$sql = "SELECT `choords` FROM `setups` WHERE `user`='".$_GET["userName"]."' LIMIT 1";
$res = mysql_query($sql) or die (mysql_error());
$row = mysql_fetch_assoc($res);
$aPos = explode("|", $row["choords"]);
$sPlayerPositions = "";
for ($i=0,$j=count($aPos); $i<$j; $i++) {
    $aCss = explode(",", $aPos[$i]);
    $sPlayerPositions .= "<div style='left:".($aCss[0])."px;top:".($aCss[1])."px' id='plyr_".($i+1)."' class='player'>".($i+1)."</div>";
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Show Players</title>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font: 0.85em verdana, sans-serif;
}
#playerCont {
    position: relative;
    width: 800px;
    height: 400px;
    background: green;
}
.player {
    position: absolute;
    width: 50px;
    height: 38px;
    padding-top: 12px;
    background: yellow;
    font: bold 20px arial, sans-serif;
    text-align: center;
}
</style>
</head>
<body>

<div style="padding:50px">

<div id="playerCont">
<?php
print $sPlayerPositions;
?>
</div>

</div>

</body>
</html>
Avatar billede olebole Juniormester
17. maj 2008 - 21:27 #8
- og du bør selvfølgelig ikke bruge $_GET["userName"] direkte i en sql-sætning uden at validere den først  ;o)
Avatar billede TiHs Nybegynder
06. oktober 2008 - 17:00 #9
Send et svar :o)
Avatar billede TiHs Nybegynder
07. oktober 2008 - 22:39 #10
nå, lukker selv :o)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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