Visualizzazione dei risultati da 1 a 2 su 2

Discussione: Drag and drop

  1. #1

    Drag and drop

    Ciao a tutti.
    Premetto che sono poco pratico di javascript e php.
    Ho il seguente problema.
    Ho creato una pagina web che ha come sfondo un campo di calcio visto dall'alto e in una zona di questa pagina ci sono delle immagini di calciatori.
    Ho utilizzato lo script seguente preso da uno dei tanti siti che li mettono a disposizione per fare in modo che tali immagini di calciatori siano "draggabili" all'interno della mia pagina web e quindi del campo di calcio. Lo script è questo:
    <code>
    <style type="text/css">

    .drag{
    position:relative;
    cursor:hand;
    z-index: 100;
    }

    </style>

    <script type="text/javascript">

    var dragobject={
    z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
    initialize:function(){
    document.onmousedown=this.drag
    document.onmouseup=function(){this.dragapproved=0}
    },
    drag:function(e){
    var evtobj=window.event? window.event : e
    this.targetobj=window.event? event.srcElement : e.target
    if (this.targetobj.className=="drag"){
    this.dragapproved=1
    if (isNaN(parseInt(this.targetobj.style.left))){this. targetobj.style.left=0}
    if (isNaN(parseInt(this.targetobj.style.top))){this.t argetobj.style.top=0}
    this.offsetx=parseInt(this.targetobj.style.left)
    this.offsety=parseInt(this.targetobj.style.top)
    this.x=evtobj.clientX
    this.y=evtobj.clientY
    if (evtobj.preventDefault)
    evtobj.preventDefault()
    document.onmousemove=dragobject.moveit
    }
    },
    moveit:function(e){
    var evtobj=window.event? window.event : e
    if (this.dragapproved==1){
    this.targetobj.style.left=this.offsetx+evtobj.clie ntX-this.x+"px"
    this.targetobj.style.top=this.offsety+evtobj.clien tY-this.y+"px"
    return false
    }
    }
    }

    dragobject.initialize()

    </script>
    </code>

    inserito all'interno dei tag head.
    Funziona alla perfezione.
    La cosa che vorrei fare è però quella di memorizzare in un database le coordinate x ed y di tali immagini, dopo che un visitatore ha creato la sua formazione spostando i calciatori all'interno del campo di calcio, di modo che il visitatore successivo visualizzi la formazione creata da quello precedente.
    Ho letto in vari forum la possibilità di usare i cookie ma a me non serve che lo stesso visitatore ogni volta che apre la pagina veda la formazione che lui stesso ha creato bensì che ciascuno visualizzi la formazione creata dal visitatore precedente.
    La mia idea era quella, per la prima visualizzazione della pagina, cioè come la vedrà il primo visitatore, di impostare i valori di default per la posizione delle immagini in un database e di fare in modo che la posizione di ogni immagine venga prelevata da da tale database e richiamata nella pagina php che dovrà andare a pescare le cooridnate di ciascuna immagine dai campi della tabella.
    Fatto ciò vorrei tramite php o in qualche altro modo sovrascirvere nel database i nuovi valori di coordinate che non sono altro che i valori delle variabili this.targetobj.style.left e this.targetobj.style.top di modo che il visitatore successivo aprirà la pagina, e visto che le posizioni delle immagini vengono caricate dal database, visualizzerà la formazione creata dall'utente precedente.
    Per essere più chiaro è possibile visitare la pagina che ho creato in cui le foto sono draggabili al seguente indirizzo:
    http://vgsangiuliano.altervista.org/formazione.html
    Ovviamente in tale pagina la posizione di default delle immagini è quella ottenuta inserendole in appositi tag td.
    Avrei bisogno di sapere quindi come fare a modificare il codice della pagina per fare le seguenti cose:
    1- All'apertura via browser della pagina le coordinate di ciascun div all'interno dei quali è contenuta ciascuna immagine di calciatore devono essere caricate da una tabella di un database che ha una struttura tipo idimmagine(key), posizione x e posizione y.
    2- Ogni volta che un visitatore sposta all'interno del campo di calcio ujn'immagine i valori di this.targetobj.style.left e this.targetobj.style.top calcolati dal javascript postato devono andare a sovrascrivi i valori precednti salvati nel database

    In questo modo ogni qualvolta viene aperta la pagina, visto che le coordinate delle immagini vengono caricate dal database il visitatore vedrà sempre la formazione creata dal visitatore precedente.
    Per fare tutto ciò chiedo se possibile il vostro aiuto perchè a spiegarlo a parole sono capace ma il problema è tradurre tutto ciò in "codice informatico".
    Potete aiutarmi?
    Ps Mi scuso per aver scritto un poema e per non essere stato conciso.
    Grazie a tutti.

  2. #2
    Ho quasi trovato il modo per fare quello che dicevo prima solo che non so come fare per assegnare ad una variabile php il valore di una variabile javascript qualcuno può aiutarmi?
    Ho evidenziato in rosso quello che vorrei fare, ovviamente mi da errore. Grazie a tutti

    <style type="text/css">

    .drag{
    position:relative;
    cursor:hand;
    z-index: 100;
    }

    </style>

    <script type="text/javascript">

    var dragobject={
    z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
    initialize:function(){
    document.onmousedown=this.drag
    document.onmouseup=function(){this.dragapproved=0}
    },
    drag:function(e){
    var evtobj=window.event? window.event : e
    this.targetobj=window.event? event.srcElement : e.target
    if (this.targetobj.className=="drag"){
    this.dragapproved=1
    if (isNaN(parseInt(this.targetobj.style.left))){this. targetobj.style.left=0}
    if (isNaN(parseInt(this.targetobj.style.top))){this.t argetobj.style.top=0}
    this.offsetx=parseInt(this.targetobj.style.left)
    this.offsety=parseInt(this.targetobj.style.top)
    this.x=evtobj.clientX
    this.y=evtobj.clientY
    if (evtobj.preventDefault)
    evtobj.preventDefault()
    document.onmousemove=dragobject.moveit
    }
    },
    moveit:function(e){
    var evtobj=window.event? window.event : e
    if (this.dragapproved==1){
    this.targetobj.style.left=this.offsetx+evtobj.clie ntX-this.x+"px"
    this.targetobj.style.top=this.offsety+evtobj.clien tY-this.y+"px"

    <?php $xpos?>=this.targetobj.style.left
    <?php $ypos?>=this.targetobj.style.top

    return false
    }
    }
    }

    dragobject.initialize()

    </script>

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.