div fluttuante

E' complicato creare un div "mobile"? Nel senso di un div che si possa
spostare con il drag and drop.
Qualche aiuto?
Ciao Mantrex

postcross: it.lavoro.professioni.webmaster

"Mantrex" <NOSPAM> ha scritto

E' complicato creare un div "mobile"? Nel senso di un div che si possa
spostare con il drag and drop.
Qualche aiuto?

Ho trovato questo:
http://www.mrwebmaster.it/javascript...dhtml_465.html

L'ho provato e funziona.
Adesso però vorrei capire "come" funziona, perché ho letto attentamento il
codice ma non ho sufficienti conoscenze per capirlo.
C'è qualcuno che gentilmente si presterebbe a spiegarmelo?
Passando direttamente al codice javascript, dato che il div e lo stile
relativo sono di semplice fattura, vado direttamente a leggere gli eventi,
ossia document.onmousedown = Coordinate;

dunque, se non ho capito male ciò significa che all'evento del mousedown
(ossia di quando si tiene premuto il pulsante del mouse) su un qualsiasi
punto della pagina viene richiamata la funzione Coordinate.
Quindi entrando nella funzione Coordinate abbiamo: if (event.srcElement.id
== "M")

Questo significa "se tale evento(onmousedown) avviene sull'elemento id
uguale ad M, fai quello che segue. Ecco, qui comincio ad andare nel caos,
innanzitutto perché non ho capito una cosa basilare. Quando si scrive:
document.onmousemove = Muovi; credo che si entri all'interno della funzione
Muovi all'evento in cui il mouse si muove (ed è premuto abbiamo detto). Ma
quello che non capisco è se viene fatto un "salto" alla funzione Muovi e poi
si ritorna alla funzione Coordinate, oppure se si rimane all'interno della
funzione Coordinate ma viene richiamata la funzione Muovi all'interno di
Coordinate.

In seguito non ho capito cosa sono X ed Y, ossia event.clientX; e
event.clientY; che verranno appunto adoperati nella funzione Muovi.


ciao Mantrex

"Mantrex" <NOSPAM> ha scritto

Tra l'altro mi sono reso conto ora che va su IE ma su Firefox no...
La console di Firefox non riconosce "event" del codice:
event.srcElement.idquale altro nome potrei dare ad event per renderlo
compatibile con Firefox?ciao M.

/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
* Script featured on Dynamic Drive (http://www.dynamicdrive.com) 12.08.2005
**************************************************
* 10.28.2001 - fixed minor bug where events
* sometimes fired off the handle, not the root.
************************************************** /
var Drag = {
z : new Array(),
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef,
bSwapVertRef, fXMapper, fYMapper)
{
o.onmousedown = Drag.start;
o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left
= "0px";
if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top
= "0px";
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right
= "0px";
if (!o.vmode && isNaN(parseInt(o.root.style.bottom)))
o.root.style.bottom = "0px";
o.minX = typeof minX != 'undefined' ? minX : null;
o.minY = typeof minY != 'undefined' ? minY : null;
o.maxX = typeof maxX != 'undefined' ? maxX : null;
o.maxY = typeof maxY != 'undefined' ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : function(e)
{
var o = Drag.obj = this;
e = Drag.fixE(e);
// il destro non sposta gli elementi
if (e.which == 3 || e.which == 2){
return false;
}
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(x, y);
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
if (o.hmode) {
if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
} else {
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
}
if (o.vmode) {
if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
} else {
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
}
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;

return false;
},
drag : function(e)
{
e = Drag.fixE(e);
var o = Drag.obj;
var ey = e.clientY;
var ex = e.clientX;
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) :
Math.min(ex, o.maxMouseX);
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) :
Math.max(ex, o.minMouseX);
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) :
Math.min(ey, o.maxMouseY);
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) :
Math.max(ey, o.minMouseY);
nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
if (o.xMapper){
nx = o.xMapper(y)
}
else if (o.yMapper){
ny = o.yMapper(x)
}
Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
Drag.obj.root.onDrag(nx, ny);

return false;
},

curren : '', // elemento corrente

updown: function(elm){
var m,i,add;
add = true; // se veve inserire un elemento nell array
for(m=0; m<Drag.z.length; m++){
if(Drag.z[m]==elm){
add = false;
}
}

if(add==true){
Drag.z.push(elm);
}

if(Drag.curren!=elm){ // se diverso scala
Drag.curren = elm;
var kkc = Drag.z.length;
for(i=0; i<kkc; i++){
if(Drag.z[i] == elm){
document.getElementById(Drag.z[i]).style.zIndex = kkc + 1;
}else{
if(document.getElementById(Drag.z[i]).style.zIndex >0){
document.getElementById(Drag.z[i]).style.zIndex =
document.getElementById(Drag.z[i]).style.zIndex - 1;
}else{
document.getElementById(Drag.z[i]).style.zIndex = 0;
}
}
// dbg document.getElementById(Drag.z[i]).innerHTML =
document.getElementById(Drag.z[i]).style.zIndex;
}
}
},

end : function(){
document.onmousemove = null;
document.onmouseup = null;

//Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.sty le[Drag.obj.hmode ?
"left" : "right"]),
//
parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));

var l = parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" :
"right"]);
var h = parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" :
"bottom"]);

Drag.obj.root.onDragEnd(l,h);


Drag.updown(Drag.obj.id);

saveposition(l,h,Drag.obj.id); // questa mi serve per altro
// come faccio una callback da qui ??
Drag.obj = null;


},
fixE : function(e)
{
if (typeof e == 'undefined') e = window.event;
if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
return e;
}
};


//--------------------------------- il div

divUp = {
opens: function(sizX,sixY,le,tp,id,file,tit){
var di = document.createElement('div');
var cc = 'height:' + sizX + 'px;width:'+ sixY+'px;' +
'position:absolute;background-color: #EEE;' +
'border: 1px solid #a0a0a0;';

if(le<0){ le = 0 }
if(tp<0){ tp = 0 }
cc += 'left:'+ le + 'px;' +
'top:'+ tp + 'px;' +


'padding-left:10px;'
;

di.setAttribute('style',cc);
di.setAttribute('id',id);
di.setAttribute('onmousedown','javascript:void
Drag.init(document.getElementById(\'' + id+ '\'));');
di.setAttribute('class','drags');
document.body.appendChild(di);
}

}



function ids(){
var chars =
"0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmn opqrstuvwxyz";
var string_length = 8;
var randomstring = '';
for (var i=0; i<string_length; i++) {
var rnum = Math.floor(Math.random() * chars.length);
randomstring += chars.substring(rnum,rnum+1);
}
return randomstring;
}



divUp.opens(200, 200, 320, 30, ids(), "rb/edithost.php", "Gattone");

questa genera i popup quanti ne vuoi

ci sto lavorando perche quello che avevo trovato non va si spostano,
caso lo script sposta anche le immagini, e ritorna Y ,X, id della
cosa spostata





Mantrex ha scritto:

"Mantrex" <NOSPAM> ha scritto

Tra l'altro mi sono reso conto ora che va su IE ma su Firefox no...
La console di Firefox non riconosce "event" del codice:
event.srcElement.idquale altro nome potrei dare ad event per renderlo
compatibile con Firefox?ciao M.

"Gufo Rosso" <spaaaaaamaaaaaa (AT) libero (DOT) it> ha scritto

var Drag = {
z : new Array(),
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef,

[CUT...]

Ehm... senza offesa eh! Ma mi sembra un po' troppo laborioso come codice.
Non è che qualcuno mi può aiutare ad integrare il codice che ho postato poco
sopra per renderlo crossbrowser

ciao Mantrex