Newsgroup: it.comp.lang.javascript
Titolo: 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 

 Qualche aiuto?
Ho trovato questo: 
http://www.mrwebmaster.it/javascript/articoli/effetto-drag-and-drop-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.style[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 = 
"0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
	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:


 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 

 ciao Mantrex
Cercando in rete, avevo trovato questo forum 
http://forum.html.it/forum/showthread/t-1113570.html
 dove Mega69 dà una 
soluzione, anche se, ancora una volta, non ne capisco il funzionamento 
perché usa un codice per me non di facile comprensione.
L'unica cosa che ho capito, teoricamente, è questo discorso:
"L'oggetto evento, nei browser del W3C, deve essere passato come argomento 
della funzione associata all'evento.
Perciò passi un variabile di nome 'evt' ( o anche 'e' ) alla funzione prova 
ogni qual volta la richiami"
Qualcuno lo sa integrare gentilmente al mio codice?
Per comodità vi riporto sotto il codice per intero del mio primo post:
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#M
{
  position: Relative;
  background-color: #EEEEEE;
  font: Normal 10px Verdana;
  width: 100px;
  height: 50px;
  padding: 5px;
  border: Solid 1px #CCCCCC;
  cursor: Move;
}
</style>
<script type="text/javascript">
var Giu = true;
var L, T, X, Y;
function Coordinate()
{
  if (
event.srcElement.id
 == "M")
  {
    Giu = true;
    document.onmousemove = Muovi;
    L = document.getElementById("M").style.pixelLeft;
    T = document.getElementById("M").style.pixelTop;
    X = event.clientX;
    Y = event.clientY;
  }
}
function Muovi()
{
  if (Giu)
  {
    document.getElementById("M").style.pixelLeft = L + event.clientX - X;
    document.getElementById("M").style.pixelTop = T + event.clientY - Y;
  }
}
function Su() { Giu = false; }
document.onmousedown = Coordinate;
document.onmouseup = Su;
</script>
</head>
<body>
<div id="M">MUOVIMI</div>
</body>
</html>