Ciao a tutti,
c'è qualcuno che sa come modificare questo script che da la possibilità di fare un "drag and drop" di immagini (che ho trovato su html.it) in modo da far rimanere le immagini nel punto esatto in cui le ho lasciate? In pratica, vorrei sapere come fare per avere la possibilità di "salvare" l'immagine nella posizione finale.
PS: in alternativa, ne conoscete un altro con questa possibilità?
dimenticavo....
lo script è questo:
[code]
<HTML>
<HEAD>
<!-- Codice scaricato gratuitamente da HTML.it, il sito italiano sul Web publishing
http://www.html.it -->
<TITLE>Esempi Javascript: esempio pratico </TITLE>
<SCRIPT LANGUAGE="JavaScript">
var curElement;
function doMouseMove() {
var newleft=0, newTop = 0
if ((event.button==1) && (curElement!=null)) {
newleft=event.clientX-document.all.OuterDiv.offsetLeft-(curElement.offsetWidth/2)
if (newleft<0) newleft=0
curElement.style.pixelLeft= newleft
newtop=event.clientY -document.all.OuterDiv.offsetTop-(curElement.offsetHeight/2)
if (newtop<0) newtop=0
curElement.style.pixelTop= newtop
event.returnValue = false
event.cancelBubble = true
}
}
function doDragStart() {
// Don't do default drag operation.
if ("IMG"==event.srcElement.tagName)
event.returnValue=false;
}
function doMouseDown() {
if ((event.button==1) && (event.srcElement.tagName=="IMG"))
curElement = event.srcElement
}
document.ondragstart = doDragStart;
document.onmousedown = doMouseDown;
document.onmousemove = doMouseMove;
document.onmouseup = new Function("curElement=null")
</SCRIPT>
<SCRIPT FOR="MovingPictures" EVENT="onmousedown" LANGUAGE="JavaScript">
event.cancelBubble=true
</SCRIPT>
</HEAD>
<BODY bgcolor="white">
<DIV id=OuterDiv style="position:relative;width:100%;height:250">
[img]html_point_3kb.gif[/img]
</DIV>
</body>
</html>
[/code
e lo potete vedere qui:
http://www.html.it/jscript/grafica/grafica07codice.htm
Sò che è un vecchio topic, ma l'argomento aperto dall'autore è proprio quello che stavo cercando. E' mezza giornata che cerco qualcosa del genere. Ho trovato tutto quello che mi occorre per realizzare un Drag & Drop delle immagini presenti in una pagina, ma vorrei sapere come fare per salvare le posizioni in pixel in un database.
sono ignorante anche io e non ho ben capito che cosa significhi questa riga:
document.onmouseup = new Function("curElement=null")
però credo che proprio li dovresti chiamare una funzione per scrivere un cookie che salvi la posizione
Codice PHP:var curElement;
function doMouseMove() {
var newleft=0, newTop = 0
if ((event.button==1) && (curElement!=null)) {
newleft=event.clientX-document.all.OuterDiv.offsetLeft-(curElement.offsetWidth/2)
if (newleft<0) newleft=0
curElement.style.pixelLeft= newleft
newtop=event.clientY -document.all.OuterDiv.offsetTop-(curElement.offsetHeight/2)
if (newtop<0) newtop=0
curElement.style.pixelTop= newtop
event.returnValue = false
event.cancelBubble = true
}
}
function doDragStart() {
// Don't do default drag operation.
if ("IMG"==event.srcElement.tagName)
event.returnValue=false;
}
function doMouseDown() {
if ((event.button==1) && (event.srcElement.tagName=="IMG"))
curElement = event.srcElement
}
document.ondragstart = doDragStart;
document.onmousedown = doMouseDown;
document.onmousemove = doMouseMove;
document.onmouseup = salva(el_id);
function salva (id) {
SetCookie(id+"-pos-x",newleft,30);
SetCookie(id+"-pos-y",newtop,30);
curElement=null; // non sono sicuro che questo sia corretto
}
function SetCookie(cookieName,cookieValue,nDays) {
var today = new Date();
var expire = new Date();
if (nDays==null || nDays==0) nDays=1;
expire.setTime(today.getTime() + 3600000*24*nDays);
document.cookie = cookieName +"="+ escape(cookieValue) +";expires="+ expire.toGMTString();
}
function ReadCookie(cookieName) {
var theCookie=""+document.cookie;
var ind=theCookie.indexOf(cookieName);
if (ind==-1 || cookieName=="") return "";
var ind1=theCookie.indexOf(';',ind);
if (ind1==-1) ind1=theCookie.length;
return unescape(theCookie.substring(ind+cookieName.length+1,ind1));
}
hai anche bisogno di una funzione che ti legga i cookie
Per salvarlo sui cookie avevo già trovato qualcosa, a me serve: che si legga la posizione in pixel dell'immagine nella pagina e che la salvi in un database (solo per gli utenti loggati). Questi dati verranno poi utilizzati durante la lettura della pagina, per mostrare le immagini nella posizione definita dall'utente in fase di modifica.
sono ignorante anche io e non ho ben capito che cosa significhi questa riga:
document.onmouseup = new Function("curElement=null")
però credo che proprio li dovresti chiamare una funzione per scrivere un cookie che salvi la posizione
Codice PHP:function salva (id) {
SetCookie(id+"-pos-x",newleft,30);
SetCookie(id+"-pos-y",newtop,30);
curElement=null; // non sono sicuro che questo sia corretto
}
function SetCookie(cookieName,cookieValue,nDays) {
var today = new Date();
var expire = new Date();
if (nDays==null || nDays==0) nDays=1;
expire.setTime(today.getTime() + 3600000*24*nDays);
document.cookie = cookieName +"="+ escape(cookieValue) +";expires="+ expire.toGMTString();
}
function ReadCookie(cookieName) {
var theCookie=""+document.cookie;
var ind=theCookie.indexOf(cookieName);
if (ind==-1 || cookieName=="") return "";
var ind1=theCookie.indexOf(';',ind);
if (ind1==-1) ind1=theCookie.length;
return unescape(theCookie.substring(ind+cookieName.length+1,ind1));
}
hai anche bisogno di una funzione che ti legga i cookie
da chiamare quando la pagina e tutti gli elementi da riordinare sono stati caricatiCodice PHP:function riordina(el-id) {
var newleft = ReadCookie(id+"-pos-x");
var newtop = ReadCookie(id+"-pos-y");
var el = document.getElementById(el-id);
if (newleft) el.style.pixelLeft = newleft;
if (newtop) el.style.pixelTop = newtop;
}
riordina("id dell'oggetto");
a dire la verità non ho capito molto del codice postato, ne sono riuscito a farlo funzionare, ma mi sembra di capire che lavori sugli elementi selezionati senza che sia necessario specificarne l'id. invece per salvare la posizione di un oggetto direi che l'id lo devi sapere. perciò tutto il codice va aggiustato di conseguenza.
non so se esista una funzione che faccia l'inverso di getElementById(), ma penso che farebbe al caso
Permessi di invio
Rispondi quotando