Ver Mensaje Individual
  #3 (permalink)  
Antiguo 31/01/2010, 18:53
ed-209
 
Fecha de Ingreso: noviembre-2003
Mensajes: 22
Antigüedad: 20 años, 5 meses
Puntos: 1
Respuesta: capas emergentes

Cita:
Iniciado por maycolalvarez Ver Mensaje
hace tiempo encontré esta clase dom-drag, es muy buena, te permite crear divs como ventanas:

Uso:
Var manejador='id_capa';
var cuadro='id_capa';
drag.init(manejador, cuadro);

eso sí, necesitas que la capa sea position:absolute;

Código javascript:
Ver original
  1. /**************************************************
  2.  * dom-drag.js
  3.  * 09.25.2001
  4.  * www.youngpup.net
  5.  **************************************************
  6.  * 10.28.2001 - fixed minor bug where events
  7.  * sometimes fired off the handle, not the root.
  8.  **************************************************/
  9.  
  10. var drag = {
  11.  
  12.     obj : Null,
  13.  
  14.     init : Function(o, oroot, minx, maxx, miny, maxy, bswaphorzref, bswapvertref, fxmapper, fymapper)
  15.     {
  16.         o.onmousedown    = drag.start;
  17.  
  18.         o.hmode            = bswaphorzref ? False : True ;
  19.         o.vmode            = bswapvertref ? False : True ;
  20.  
  21.         o.root = oroot && oroot != null ? Oroot : O ;
  22.  
  23.         if (o.hmode  && isnan(parseint(o.root.style.left  ))) o.root.style.left   = "0px";
  24.         if (o.vmode  && isnan(parseint(o.root.style.top   ))) o.root.style.top    = "0px";
  25.         if (!o.hmode && isnan(parseint(o.root.style.right ))) o.root.style.right  = "0px";
  26.         if (!o.vmode && isnan(parseint(o.root.style.bottom))) o.root.style.bottom = "0px";
  27.  
  28.         o.minx    = typeof minx != 'undefined' ? Minx : Null;
  29.         o.miny    = typeof miny != 'undefined' ? Miny : Null;
  30.         o.maxx    = typeof maxx != 'undefined' ? Maxx : Null;
  31.         o.maxy    = typeof maxy != 'undefined' ? Maxy : Null;
  32.  
  33.         o.xmapper = fxmapper ? Fxmapper : Null;
  34.         o.ymapper = fymapper ? Fymapper : Null;
  35.  
  36.         o.root.ondragstart    = new function();
  37.         o.root.ondragend    = new function();
  38.         o.root.ondrag        = new function();
  39.     },
  40.  
  41.     start : Function(e)
  42.     {
  43.         var o = drag.obj = this;
  44.         e = drag.fixe(e);
  45.         var y = parseint(o.vmode ? O.root.style.top  : O.root.style.bottom);
  46.         var x = parseint(o.hmode ? O.root.style.left : O.root.style.right );
  47.         o.root.ondragstart(x, y);
  48.  
  49.         o.lastmousex    = e.clientx;
  50.         o.lastmousey    = e.clienty;
  51.  
  52.         if (o.hmode) {
  53.             if (o.minx != null)    o.minmousex    = e.clientx - x + o.minx;
  54.             if (o.maxx != null)    o.maxmousex    = o.minmousex + o.maxx - o.minx;
  55.         } else {
  56.             if (o.minx != null) o.maxmousex = -o.minx + e.clientx + x;
  57.             if (o.maxx != null) o.minmousex = -o.maxx + e.clientx + x;
  58.         }
  59.  
  60.         if (o.vmode) {
  61.             if (o.miny != null)    o.minmousey    = e.clienty - y + o.miny;
  62.             if (o.maxy != null)    o.maxmousey    = o.minmousey + o.maxy - o.miny;
  63.         } else {
  64.             if (o.miny != null) o.maxmousey = -o.miny + e.clienty + y;
  65.             if (o.maxy != null) o.minmousey = -o.maxy + e.clienty + y;
  66.         }
  67.  
  68.         document.onmousemove    = drag.drag;
  69.         document.onmouseup        = drag.end;
  70.  
  71.         return false;
  72.     },
  73.  
  74.     drag : Function(e)
  75.     {
  76.         e = drag.fixe(e);
  77.         var o = drag.obj;
  78.  
  79.         var ey    = e.clienty;
  80.         var ex    = e.clientx;
  81.         var y = parseint(o.vmode ? O.root.style.top  : O.root.style.bottom);
  82.         var x = parseint(o.hmode ? O.root.style.left : O.root.style.right );
  83.         var nx, ny;
  84.  
  85.         if (o.minx != null) ex = o.hmode ? Math.max(ex, o.minmousex) : Math.min(ex, o.maxmousex);
  86.         if (o.maxx != null) ex = o.hmode ? Math.min(ex, o.maxmousex) : Math.max(ex, o.minmousex);
  87.         if (o.miny != null) ey = o.vmode ? Math.max(ey, o.minmousey) : Math.min(ey, o.maxmousey);
  88.         if (o.maxy != null) ey = o.vmode ? Math.min(ey, o.maxmousey) : Math.max(ey, o.minmousey);
  89.  
  90.         nx = x + ((ex - o.lastmousex) * (o.hmode ? 1 : -1));
  91.         ny = y + ((ey - o.lastmousey) * (o.vmode ? 1 : -1));
  92.  
  93.         if (o.xmapper)        nx = o.xmapper(y)
  94.         else if (o.ymapper)    ny = o.ymapper(x)
  95.  
  96.         drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
  97.         drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
  98.         drag.obj.lastmousex    = ex;
  99.         drag.obj.lastmousey    = ey;
  100.  
  101.         drag.obj.root.ondrag(nx, ny);
  102.         return false;
  103.     },
  104.  
  105.     end : Function()
  106.     {
  107.         document.onmousemove = null;
  108.         document.onmouseup   = null;
  109.         drag.obj.root.ondragend(    parseint(drag.obj.root.style[drag.obj.hmode ? "left" : "right"]),
  110.                                     parseint(drag.obj.root.style[drag.obj.vmode ? "top" : "bottom"]));
  111.         drag.obj = null;
  112.     },
  113.  
  114.     fixe : Function(e)
  115.     {
  116.         if (typeof e == 'undefined') e = window.event;
  117.         if (typeof e.layerx == 'undefined') e.layerx = e.offsetx;
  118.         if (typeof e.layery == 'undefined') e.layery = e.offsety;
  119.         return e;
  120.     }
  121. };
muy bueno el codigo, ya lo puse en practica y funciono... Una pregunta, ademas de ubicarte la capa libremente se puede hacer que se arrastre y otras funciones, como seria? Porque probe arrastrando y no pasa nada.
Muchas gracias por compartir! Saludos