PopUp draggabili con javascript

Qualche giorno fa avevo la necessità di creare una finestra draggabile via javascript, dove il contenuto potesse essere definito/ridefinito a runtime.

Anche se Edit in passato aveva pubblicato qualcosa di simile, le mie necessità spaziavano del caricare contenuti da file esterni ( aka ahah ) al generali con javascript e dom, inoltre avevo bisogno di definire le coordinate di partenza per poi modificarle in relazione ad altri eventi.

Insomma … “chi fa da se fa per tre” , “meglio soli che mal accompagnati” , “aiutati che il ciel ti aiuta

Dopo aver meditato su queste perle di saggezza popolare ho scritto qualche riga di codice …


function JsPopUpBox(sHtml,sTitle,nTop,nLeft) {
/*
* JsPopUpBox v.0.3
* https://maurizio.mavida.com/
* based on great jQuery - http://jquery.com/
* Use:
*
*** direct mode ***
*
* >only popup body without title
*JsPopUpBox( "Hello world")
*
* body e title
*JsPopUpBox( "Hello world","popup titile")
*
* set top and left position
*JsPopUpBox( "Hello world","popup titl",10,10)
*
*** jquery mode ***
*var objpopup = JsPopUpBox( "Hello world" , "title")
*objpopup.css("top","50px")
*objpopup.css("left","50px")
*objpopup.fadeIn("slow")
*
*/
var aPopup = new Array("");

var PopUpCss = function () {

$("#PopUpBox").css({
"position" : "absolute",
"background-color" : "#ccc",
"top" : "10px",
"left" : "10px",
"height" : "250px",
"width" : "400px",
"z-index" : "100",
"border" : "1px solid #000"
});

$("#PopUpBox #PopUpHead,#PopUpBox #PopUpClose").css({
"background-color" : "#77829f",
"height" : "18px",
"padding-top" : "2px",
"border-bottom" : "1px solid #000",
"font-family" : "verdana",
"color" : "#fff"
});

$("#PopUpBox #PopUpHead").css({
"font-size" : "14px",
"text-align" : "left",
"padding-left" : "10px",
"cursor" : "move",
"width" : "370px"
});

$("#PopUpBox #PopUpClose").css({
"font-size" : "16px",
"text-align" : "center",
"font-weight" :"bolder",
"cursor" : "pointer",
"width" : "20px"
});

}

var PopUpMouseDown = function (e) {
dragEnable = false

if (!e) var e = window.event;
objDrag = (e.target) ? e.target : e.srcElement

if ( objDrag.className=="PopUpBox_drag" ){

dragEnable = true
objDrag = objDrag.parentNode

x = e.clientX - objDrag.style.left.replace('px','')
y = e.clientY - objDrag.style.top.replace('px','')

//abilito l'evento onmousemove e onmouseup
$(document.body).mousemove(PopUpMouseMove)
$(document.body).mouseup(PopUpMouseUp)

} else {
// esco dalla la modalità di drag
dragEnable = false
objDrag = null
$(document.body).unmousemove(PopUpMouseMove)
$(document.body).unmouseup(PopUpMouseUp)
}

//return false;
}

var PopUpMouseMove = function (e) {
if (dragEnable){
if (!e) var e = window.event;
objDrag.style.left = (e.clientX -x )+"px"
objDrag.style.top = (e.clientY -y)+"px"
}
return false;
}

var PopUpMouseUp = function (e) {
// esco dalla la modalità di drag
dragEnable = false

$(document.body).unmousemove(PopUpMouseMove)
$(document.body).unmouseup(PopUpMouseUp)
return false;
}

if ( $("#PopUpBox").size() == 0 ) {
aPopup.push("

\n")
$(document.body).append( aPopup.join("") )
PopUpCss()
$("#PopUpBox #PopUpHead").mousedown( PopUpMouseDown )
$("#PopUpBox #PopUpClose").click( function() {
$("#PopUpBox").remove();
} )

}

if (nTop != undefined) $("#PopUpBox").css("top",top+"px");
if (nLeft != undefined) $("#PopUpBox").css("left",left+"px");

$("#PopUpBox #PopUpText").get(0).innerHTML = sHtml

return $("#PopUpBox")
}

Questo è il link per vederla in azione

Per facilitarmi il compito ho usato come base jquery, una libreria che per certi apetti si avvicina come idea a prototype e che per quanto mi riguarda è diventata quasi indispensabile.

Quindi per il corretto funzionamento della popup ricordiamoci di aggiungere questa riga alla nostra pagina.
< s c r i p t type="text/javascript" src="http://jquery.com/src/latest/"> //< / s c r i p t >
( attenzione agli s p a z i )

Per mia scelta i css sono definiti inline direttamente da codice in modo da evitare l’ennesivo css allegato alla pagina e permettere un più rapida personalizzazione.

All’interno del codice oltre alla sezione di generazione della finestra ( che in realtà è costituito da un semplice append ) …
$(document.body).append( aPopup.join("") )
… sono presenti le funzioni necessarie all’implementazione del drag che sono stata inserite all’interno con l’obbiettivo di rendere la librerie il più compatta possibile

Ma vediamo alcuni esempi di utilizzo:

JsPopUpBox( "Hello world")
Questo è il modo più semplice, l’unico parametro fornito è il testo contentuto nella popup

JsPopUpBox( "Hello world","popup titile")
Il secondo paramentro (opzionale) permette di definire il titolo della finetra.

JsPopUpBox( "Hello world","popup titl",10,10)
Infine se vogliamo specificare la posizione della finestra è possibile specificare altri due parametri che definiscono rispettivamente le coordinate top e left

ma come dicevo prima ho utilizzato come framework jquery che permette alcune magie molto divertenti …

JsPopUpBox( "Hello world").fadeIn("slow")
Questo è il codice necessatio per gestire in simpatico effetto di dissolvenza in entrata

JsPopUpBox( "Loading ...").find("#PopUpText").load("esempio.html")
in questo modo invece visualizziamo la scritta “Loading … ” sino a che tramite ajax/ahah la pagina esempio.html non è stata carica ed il suo contenuto inserito all’interno della nostra finistra


var obox = JsPopUpBox( "Hello world");
obox.css({"top": "30px","left":"70px"});

infine per modificare a runtime la posizione della finistra è sufficente definire una variabile alla quale far riferimento nel momento un cui ridefinire alcune proprietà dei css.

commenti, suggerimenti e segnalazione di bachi sono ben accetti …

6 Comments

  1. Ciao,

    ho trovato molto interessante questo articolo e volevo gentilmente chiederti, se e come era possibile poter salvare anche la posizione della window una volta definita e posizionata, associandola all’utente che la generata, like live.com o netvibes.com.

    Grazie
    Pietro

  2. la prima cosa che mi viene in mente e salvarlo direttamente nel cookie tramite javascript creando una funzione che va eseguira dopo ogni movimento.
    Questo però nel caso di pulizia dei cookie da parte del client, o cambio macchina, ci fa perdere tutte le posizioni.
    Quindi anche se decisamente più complicato, una soluzione basata su autenticazione utente + ajax ci permette di salvare i dati lato server, magari organizzando un database a questo proposito.
    Questa seconda strada penso sia quella adottata dai siti da te citati

  3. Sembra ottimo, ma non riesco a farlo funzionare, forse perchè non riesco a fare un copia e incolla corretto del codice. Se puoi inviarmelo. Ti ringrazio.

Leave a Reply

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.