div traggabile

Veniamo alla prima richiesta:
Ho creato un menu utilizzando div draggabili in modo da formare una serie di boxes nello schermo le quali contengono ciascuna una voce di menu
I boxis sono spostabili nello schermo per cui ogni utente, che puo accedere aolo se autorizzato, puo organizzarsi i menu come meglio crede.
Il problema è che ogni volta che ricarico la pagine l'eventuale personalizzazione va a farsi benedire dato che tutto ritorna alla posizione di origine.

Non sono riuscito a fare in modo che il sistema mi comunichi la posizione finale del box che sposto in modo da poter memorizzare dette posizioni in una tabella mysql per fare si che ogni utente, in tutu, possa ritrovare la propria pagina personalizzata.

Ho il sospetto che tutto sia possibile con javascript ma non ho assolutamente idea di come si possa fare.

In sostanza:
1 - Come si fa, in javascript, a rilevare le coordinate top e left di un box dopo che questo è stato posizionato nel video?
2 - come si fa a fare in modo che questi due dati possano essere memorizzati in un form per essere inviati ad una pagina che provveda alla loro registrazione in una tabella?

Grazie a tutti (per ora)

Valentini

PS. scusate l'errore nel titolo ma mi è scappato il dito!......

criric ha scritto:

Ciao, immagino che per il draggable tu abbia usato jquery
prova questo esempio

HTML:

<style type="text/css">
    .drag {
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
    }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.drag').draggable();
        
        $('.drag').mouseup(function() {
            var position = $('.drag').position();
            alert(("left: " + position.left + ", top: " + position.top ));
        })
        
    });
</script> 
<div class="drag"></div>

al posto dell'alert potresti richiamare una pagina php con ajax che si occupera di memorizzare la posizione

Clicca per allargare...

Ei,come si dice,qui casca l'asino!
Io di javascript o di ajax sono alle prime armi per cui non riesco a trovare la formula giusta!...
Mi daresti una aiutino ancora
Grazie

criric ha scritto:

non avendo a portata il tuo codice continuo con il mio
pagina html

HTML:

<style type="text/css">
    .drag {
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
    }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.drag').draggable();
        
        $('.drag').mouseup(function() {
            var position = $('.drag').position();            
            $.ajax({
                type: "POST",
                url: "memorizza.php",
                data: "top=" + position.top + "&left=" + position.left
                
            }); 
        })
        
    });
</script> 
<div class="drag"></div>

ho inserito una chiamata ajax in POST che richiama la pagina memorizza.php dove inserireai qualcosa simile a questo

PHP:

<?php

session_start();
include_once 'connessione.php';

$query = "INSERT INTO boxPosition 
                 SET utente = " . $_SESSION['idUtente'] . ",
                     ptop = '" . $_POST['top'] . "',
                     pleft = '" . $_POST['left'] . "'";
$result = mysqli_query($conn, $query);

?>

non è difficile

Clicca per allargare...

Grazie!
Hai ragione non è difficile!..... basta conoscere Ajax!
Comunque credo di esserci ciao

valentini ha scritto:

Grazie!
Hai ragione non è difficile!..... basta conoscere Ajax!
Comunque credo di esserci ciao

Clicca per allargare...

Dunque.... eccomi di nuovo!
Chiedo scusa se continuoa disturbare ma la cosa è specialmente per informazione (e una aiuto anche nella soluzione).
lo script che mi è stato suggerito funziona alla perfezione! C'è solo un piccolo problema che rende difficile il suo utilizzo, almeno per lo scopo per cui intendo usarlo.
Lo script, infatti, rileva al posizione RELATIVA rispetto alla posizione precedente. I dati da esso generati (position.lef e position.top) non sono direttamente utilizzabili e quindi presi e registrati in una tabella mysql per cui il programma li riutilizza senza problemi fissando la DIV di riferimento nella posizione nella quale era stata portata col mopuse, ma hanno bisogno di un'ulteriore elaborazione (occorre leggere la tabella, estrarre i dati di posizione originale, sommare i punti di posizioe relativa e ricopiare gli stessi nella tabella.
Questa operazione crea un ulteriore problema in quanto dato che le variabili di sistema &_GET[] non sono azzerabili, ogni volta che viene ripetuto il ciglo la pagina ritrova i dati e li risomma a quelli preesistenti (gia aggironati) spostando continuamente la DIV nello schermo (Tieni conto che ioho ben 30 div da tenere sotto controllo!)
Occorrerebbe modificare lo script in modo che rilevi NON la posizione relativa (a partire dalla posizione precedente della stessa) a la posizione assoluta (la posizione rispetto all'angolo in alto a sinistra dello schermo) in questo modo a ogni ciglo, se non ci sono stati spostamenti, il programma rileva i dati precedenti e li sostituisce a quelli preesistenti nella tabella non provocando alcun aggiornamento di fatto.
Ecco ringrazio ancora e saluto cordialmente tutti coloro che leggono queste poche righe
Approfitto per auguruare a tutti i frequentatori del forum un cordiale BUONA PASQUA!
alentini

criric ha scritto:

non è cosi:
lo script rileva la posizione ASSOLUTA quindi a partire dall'angolo in altro a sinistra della pagina
come indicato anche nel css

Codice:

position: absolute;

provalo cosi

PHP:

<style type="text/css">
    .drag {
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
    }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.drag').draggable();
        
        $('.drag').mouseup(function() {
            var position = $('.drag').position();   
            document.getElementById('position').innerHTML = "top: " + position.top + "px - left: " + position.left + "px";
        })
        
    });
</script> 
<div id="position"></div>
<div class="drag"></div>

forse nel ciclo che fai ti sfugge qualche particolare

Clicca per allargare...

Credo di aver risolto sostituendo .position() con .offset()
in questo caso mi fornisce la posizione (left e top) relativa all'angolo in alto a sinistra dellos chermo e mi consente di soddisfare le mie esigenze
Grazie comunque sei stato di grande aiuto.
Buona Pasqua anche se in ritardo