jacascript: rilevazione di un elemento

**valentini49** · 23-03-2013, 22:54

Buon giorno a tutti
Ho creato un menu in PHP nel quale le varie voci sono rappresentate da boxes che altro non sono che delle DIV Draggables cioè sono spostabili sul video con il mouse.
Questo fa si che ogni utente che accede al menu' ha la possibilità di organizzarsi il menu' come meglio crede.
Il problema sorge quando devo ricaricare la pagina contenente il menu stesso in quanto, in questo caso, la disposizione dei boxes torna ad essere quello originario.
Io vorrei, invece, che la pagine riuscisse a recuperare le variabili top e left di ogni box e fosse in grado di registrarla in una tabella mysql in modo da consentire al sistema di ricostruire la pagina quando questa viene ricaricata.
Sono riuscito ad approntare un picolo script in js il quale, posto in prossimità di ciascuna "<DIV id ", è in gradodi recuperare le variabili di posizione di ciascun box ma mi trovo, adesso di fronte a due problemi che non riesco a superare nonostante mia sia letto e riletto i vari manuali del caso.
1 - Riesco a intercettare le coordinate di ciascun box ma solo alla partenza ma non sono in gradodi intgercettare le stesse variabili all'arrico (quando rilascio il pulsante del mouse che trascina il boz)
2 - Non riesco (hoi provato in mille modi) a recuperare le variabili intercettate per inviarle ad un'apposita pagina PHP per poterle memorizzare nella tabella di destinazione.
Sono stanco, non so piu' a chi santo votarmi!
Ho porvato a parlare con un programmatore che abita qui vicino ma mi sono trovato di fronte a un muro di gomma: Non vuole perdere tempo con un vecchietto come me)
Qualcuno si lascia intenerire e mi da una mano?
Io sono solo un pensionato che cerca di tenere attivo il proprio cervello ma mi ritengo un discretto programmatore in PHP e mi diletto a progettare e scrivere piccoli programma che nessuno poi utilizza ma che mi aiutano a passare il tempo.
Grazie

**br1** · 24-03-2013, 00:07

La descrizione e' chiara ma quello che descrivi si potrebbe realizzare in millemila modi diversi... per evitare di reinventarci la nostra versione del "programmimno" e poterti dare consigli che meglio si adattano alla tua situazione sarebbe opportuno vedere quello che hai fatto finora.

ps: pelino di invidia per la tua pensione...

**valentini49** · 24-03-2013, 01:00

Grazie per la risposta,
A proposito della pensione non èpoi cosi sfolgorante come sembra! Credimi.

dunque veniamo al problema
Prima ho detto che ritengo di essere un buon programmatore in PHP ma forse, pensandoci bene, forse sono solo un po' .... mediocre.
Ho preso in prestito dal web due files
uno è un file css con il quale si dispone lo sfondo e che, ritengo, non sia necessario al nostro problema
un secondo è uno script che io utilizzo come prima parte di tutte le mie pagine e che ho trasformato in php per poterlo caricare con il comando insert come prima parte della pagina che poi andro a pubblicare
ecco il codice la cui maggior parte non viene utilizzata ;
il file in questione si chiama SFONDO.PHP
<?
$ritorno = $_SESSION['torno'];
$sfondo = $ritorno."/img/sfondo_v".$o_id_ente.".jpg";

$vs_a = $vs_a."
<html>

<head>
<title>$nome_ente - $vs_titolo</title>
<meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\">
<link href=\"screen.css\" rel=\"stylesheet\" type=\"text/css\" />
<script type=\"text/javascript\" src=\"js/jquery-1.3.2.min.js\"></script>
<script type=\"text/javascript\" src=\"js/jquery-ui-1.7.2.custom.min.js\"></script>
<title>Menu' Principale</title>

<script type=\"text/javascript\">
$(document).ready(function(){
$(\".trascinabile\").draggable();

$(\".trascinabile_rilasciabile\").draggable({
axis: 'x'
});

$(\".non_reversibile\").draggable({
opacity: 0.5,
revert: 'invalid'
});

$(\"#right_block\").droppable({
accept: '.accettabile',
hoverClass: 'hover',
tolerance: 'fit',
drop: function(event, ui){
ui.draggable.find('p').html('rilasciato!');
}
});

$(\"#center_block\").droppable({
accept: '.accettabile',
hoverClass: 'hover',
tolerance: 'fit',
drop: function(event, ui){
ui.draggable.find('p').html('rilasciato!');
}
});
});
</script>

";
?>

ho una altro file che viene utilizato, sempre con il comandi INSERT si chiama TESTA.PHP ma non ha valore in quanto serve solamente a chiudere il file sfondo e a inserire l'intestazione della pagina

Abbiamo il file CONNESSIONE.PHP che ha lo scopo di attivare la connessione con mysql e l'attivazione di alcuni variabili che vengono normalmente utilizzate dal tutte le pagine PHP

Abbiamo quindi il file "posizioni_menu.php" il quale contiene tutte le coordinate di primo posizionamento dei boxes di menu (ne prevede fino a 24 posizionamenti in modo da poter soddisfare tutte le esigenze di impaginazione delle varie voci di menu nelle diverse condizioni

Abbiamo poi il file "vr_q.php" attraverso il quale si compote il box in parola

Infine ecco il file ha il compito di pubblicare la pagina con i vari boxes dei quali ti ho parlato

<?
ini_set('session.gc_maxlifetime',30*60);
session_start();
$id_soci = $_SESSION['id_soci'];

include'connessione.php';

if ($id <> "" and $pw <> ""){
$vs_a = ""; //inizializza la pagina

$sql = "SELECT * from onlus_accessi where id_ente = $o_id_ente and id = '$id' and pw = '$pw'";
$id_risultato=mysql_query($sql);
$righe = mysql_num_rows($id_risultato);
if($righe <> 0){
$id_soci = mysql_result($id_risultato, 0, "id_soci");
$cd_acc = mysql_result($id_risultato, 0, "cd_acc");

$sql = "SELECT * from onlus_soci where id_ente = $o_id_ente and id_soci = '$id_soci' ";
$id_risultato=mysql_query($sql);
$righe = mysql_num_rows($id_risultato);
$id_soci = mysql_result($id_risultato, 0, "id_soci");
$cognome = mysql_result($id_risultato, 0, "cognome");
$nome = mysql_result($id_risultato, 0, "nome");
$sesso = mysql_result($id_risultato, 0, "sesso");
$e_mail = mysql_result($id_risultato, 0, "e_mail");

$sql = "SELECT * from onlus_cd_acc where id_ente = $o_id_ente and cd_acc = $cd_acc";
$id_risultato=mysql_query($sql);
$righe = mysql_num_rows($id_risultato);
if($righe <> 0){
$accesso = mysql_result($id_risultato, 0, "descr");
}
}
if ($sesso == "M") {$titolo = "Signore, con questo tipo di accesso Lei può eseguire queste azioni:";}
if ($sesso == "F") {$titolo = "Signora, con questo tipo di accesso Lei può eseguire queste azioni:";}
if ($sesso == "DITTA") {$titolo = "Egregi signori, con questi tipo di accesso potete eseguire queste azioni:";}
if ($sesso == "FAM") {$titolo = "Signori, con questo tipo di accesso potete eseguire queste azioni:";}

include "posizioni_menu.php";

$vs_a = "";
$cp = 1;
$vs_titolo = "MENU' PRINCIPALE";
include 'sfondo.php';
include 'testa.php';

$cart1 = "
SPAZIO RISERVATO AI SOCI AUTORIZZATI

";

include 'cartillo.php';

$v = 0;

$largo = $rr*6+100;
$vx = 0;

if ($cd_acc == 0){

include "pos_menu.php";
$vs_a = $vs_a."
<script type=\"text/javascript\">
var elem=$(\"#box-$vx\");
var offset = elem.offset();
var sinistra = offset.left;
var alto = offset.top;
document.write( \"left: \" + sinistra + \", top: \" + alto );
</script>

<form style=\"padding: 0px; margin: 0px;\" style=\"padding: 0px; margin: 0px;\" method = \"post\" action=\"enti1.php\" target = \"_blank\">
";
$bg = "#FF9966";
$q1 = "
Inserimento nome nuovo ente

";
include 'vr_q.php';
$vs_a = $vs_a."
$q0
</form>
</div>
</div>
</div>

";
}

//-----

include "pos_menu.php";
$vs_a = $vs_a."
<form style=\"padding: 0px; margin: 0px;\" method = \"post\" action=\"cd_accesso.php\" target = \"_blank\">
";
$bg = "#FF3333";
$q1 = "
Inserimento Manutenzione codici di accesso

";
include 'vr_q.php';
$vs_a = $vs_a."
$q0
</form>
</div>
</div>
</div>
";

//-----

include 'sfondo1.php';

print ($vs_a);

}
else
{
print("
<html>

<head>
<title>$nome_ente</title>
</head>
<body>
<meta http-equiv=REFRESH content='1; URL=soci.php'>
</body>

</html>

");
}
?>
Il file è è in grado di tenere fino a un numero n di box di menu' ne ho messi solo due per rendere l'idea tu dovrai prendere in considerazione solo la prima voce di menu in quanto le altre sono solo in bozza

include "pos_menu.php";
$vs_a = $vs_a."
<script type=\"text/javascript\">
var elem=$(\"#box-$vx\");
var offset = elem.offset();
var sinistra = offset.left;
var alto = offset.top;
document.write( \"left: \" + sinistra + \", top: \" + alto );
</script>

<form style=\"padding: 0px; margin: 0px;\" style=\"padding: 0px; margin: 0px;\" method = \"post\" action=\"enti1.php\" target = \"_blank\">
";
$bg = "#FF9966";
$q1 = "
Inserimento nome nuovo ente

";
include 'vr_q.php';
$vs_a = $vs_a."
$q0
</form>
</div>
</div>
</div>

";

qui è la chiave di tutto il programma L'accesso al programma pos_menu.php lancia le DIV:
$vs_a = $vs_a."
<div style = \"
position:absolute;
top:$tx;
left:$lx;
\">
<div id=\"box-$vx\">
<div class=\"trascinabile box\">
";

La prima div sancisce la posizione di partenza della stessa,
la seconda definisce l'id e la terza la classe che ricava dagli script che si trovano sul file SFONDO.PHP.

il piccolo script che si trova all'inizio del file di pubblicazione del menu individua le coordinate di partenza ma a me servono le coordinate di arrivo quando il box viene spostato nello schermo e la possibilità di recuperarle da PHP per essere memorizzate su una tabella dalla quale riprendere il dato quando la pagina verrà ricaricata in futuro salvo l'utilizzo diun pulsante che inserirò con il quale si azzera la tabella per consentire il ripristino iniziale della pagina.
Per far si che il posizionamento venga personalizzato la tabella conterrà anche i dati dell'utente in linea per cui ogni utente avrà una serie di dati che verranno utilizzati per la formazione del menu' personalizzato.

Non sono sicuro di essere stato esaustivo, spero di si, fammi sapere, grazie di tutto, ciao

**br1** · 24-03-2013, 11:54

Mi spiace, qui non si parla di PHP (che nel mio caso manco conosco).

Se ti serve aiuto per la parte javascript devi postare il codice che riceve il browser... meglio di tutto sarebbe avere un link alla pagina pubblicata.

**valentini49** · 24-03-2013, 12:07

Ok so di non essere stato molto chiaro anzi credo proprio di aver fatto una certa confusione e di essere stato alquanto prolisso
Pubblico la pagina modificata in modo che si possa aprire senza dover ricorrere all'i e la password per entrare e poi ti mando l'indirizzo
Ciao
Grazie per ora

**valentini49** · 24-03-2013, 20:04

Eccomi di nuovo
ho inserito nel mio sito la pagina incriminata!
L'impaginazione appare incompleta ma ho dovuto fare delle modifiche specialmente nella frnitura di alcune variabili che il sistema acquisisce lungo ilpercorso di avvicinamento alla pagina stessa
Quello che conta è il fatto che i boxes di cui ti ho parlato funzionano
Sopra il primo box vedi due dati che sono le coordinate di partenza del box stesso che ho rilevato utilizzando il piccolo script che ho inserito fra le DIV relative al box appunto.
Quello che mi manca è
1 - come rilevare le coordinate all'arrivo del box dopo lo spostamento
2 - come prelòevare le stesse e utilizzarle per la loro registrazione su una tabella
IO con javascript me la cavo malissimo. Quiello che ho fatto è solo un copia e incolla di suggerimenti rimediato sul web ma so che si puo' fare!
Sarebbe interssante capire come....

Cioao e grazie!

**valentini49** · 24-03-2013, 20:19

Scusa forse la vecchiaia o la moglie che mi reclama per un lavoretto di fatica!
Mi sono dimenticato di mandare l'indirizzo della prova
http://www.valentinisoft.it/onlus/ri...oci2_prova.php
ecco... dora dovrebbe esserci tutto

**valentini49** · 26-03-2013, 12:54

Capito!
Non vale la pena perdere tempo con un vecchietto perditempo!
Gra lo stesso per aver perso tempo a leggere

**Vindav** · 26-03-2013, 13:37

codice:

$(tuoselettore).draggable({
    start: function() {
    	alert($(this).position());
    },
    stop: function() {
	alert($(this).position());
    }
});

Discussione: jacascript: rilevazione di un elemento

Strumenti discussione

Ricerca discussione

Visualizza

jacascript: rilevazione di un elemento

Permessi di invio