Mover popups

[angel1993]

Necesito algo como esto

Pero que pueda tener varias abiertas y moverlas.. emm si se pudiese cambiar el tamaño seria perfecto.. pero bah no es importante :)
¿Alguien sabe como?

[angel1993]

TEngo esto.. lo he sacado de otra web, el problema lo tengo en el PID de js.. si pongo la id directamente funciona pero si intento meterlo desde el onclick no funciona

Código Javascript:

var IE = document.all?true:false 
if (!IE) document.captureEvents(Event.MOUSEMOVE) 
 
document.onmousemove = posicRatonXY; 
var posicX = 0 
var posicY = 0 
 
function posicRatonXY(e,pid) { 
if (IE) { posicX = event.clientX + document.body.scrollLeft; 
posicY = event.clientY + document.body.scrollTop} 
else { posicX = e.pageX; posicY = e.pageY }; 
if (posicX < 0) {posicX = 0}; 
if (posicY < 0) {posicY = 0}; 
 
document.getElementById(pid).style.left = posicX + "px"; 
document.getElementById(pid).style.top = posicY + "px"; 
return true }
 

Código HTML:

<div id="asa" onclick="posicRatonXY('e','asa')" style="text-align:center; position:fixed; left:30px;top:10px;"> 
<form id="Raton" action=" "> 
<p>Posición horizontal: 
<br>Eje X <input type="text" name="RatonX" value="0" size="4" style="text-align:right"></p> 
 
<p>Posición vertical: 
<br>Eje Y <input type="text" name="RatonY" value="0" size="4" style="text-align:right"></p> 
</form> 
</div>
 

[maycolalvarez]

has oído sobre DOM DRAG?, es un script genial para mover capas (ventanas), no interfiere con ningún framework JS

Código Javascript:

/**************************************************
 * dom-drag.js
 * 09.25.2001
 * www.youngpup.net
 **************************************************
 * 10.28.2001 - fixed minor bug where events
 * sometimes fired off the handle, not the root.
 **************************************************/
 
var Drag = {
 
    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);
        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;
    },
 
    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"]));
        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;
    }
};
 

uso:
(id_div_window requiere CSS position:absolute;)

Drag.init('id_div_manejador', 'id_div_window');