Html 在页面周围移动div，它会在屏幕边缘变形

我有一些具有这种结构的弹出窗口：

<div id="pop_cont" class="popup_cont" >
    <div id="pop" class="popup" >
        <div class="xclose" ><img src="images/divclose.png" onclick="closediv('pop_cont');" title="chiudimi" /></div>
        <div id="pop_title" class="popup_title" >TITLE</div>
        <div id="pop_int" >SOME CONTENT</div>
    </div>
</div>

稍后，我移动得到的弹出窗口，抓取“class='popup_title'”div并在父元素周围移动。 使用这种脚本：

var oDrag = null
var x,y,dx,dy

function mdown(e) {
    if (!e) var e = window.event;
    oDrag = (e.target) ? e.target : e.srcElement
    if (oDrag.className=='popup_title'){
        oDrag=oDrag.parentElement;
        x = e.clientX;
        y = e.clientY;
        dx = x - parseInt(oDrag.style.left);
        dy = y - parseInt(oDrag.style.top);
        document.onmousemove=mdrag_on;
        document.onmouseup=mdrag_off;
    } else {
        oDrag = null;
    }
}

function mdrag_on(e) {
    if (!e) var e = window.event;
    oDrag.style.left = parseInt(e.clientX - dx)+'px';
    oDrag.style.top =parseInt(e.clientY - dy)+'px';
    return false
}

function mdrag_off(e) {
    document.onmousemove=null;
}

非常简单，但它可以工作。 问题是，当我靠近屏幕边缘，右边缘，div get时，我移动的是压缩，而不是离开屏幕。 它被压缩，直到有可能，包装文本，当不再可能时，它会离开屏幕。 当我回去时，它会尽快回到标准尺寸。 有什么方法可以避免这种情况？像设置我要移动的div的css吗？

好的，我解决了。 或者说，我没有解决问题，但我发现了设计错误和某种解决方案。 我有一个容器，基本上是一个大阴影，当弹出窗口出来时，它覆盖了所有的东西。 弹出窗口是这个阴影的子窗口，所以当我走到屏幕边缘时，实际上我走到了阴影的边缘，网络浏览器当然会试图让弹出窗口停留在它里面。 所以我给了

width:300%

到我的“影子”容器，现在它看起来很好。（奇怪的是，左侧和底部都没有发生…）

所以现在真正的解决方案是使阴影不成为弹出窗口的父对象，但这需要在每次需要显示弹出窗口时显示class='block'，或者保持此宽度：300% 有人能给我一些好建议吗

width:300%