可以拖动的弹出窗

如何让弹出窗口可以拖动呢?

如何做出可以拖动的对话框呢?

实际上弹出窗口就是一个div,范例:

<!--  弹出窗口层 -->
	<div id="subPagePanel"  style="display:none;"  >
    <h2 style="color: #fff;font-weight: bold;" class="ui-icon-close" ><label>发帖</label>
        <a title="关闭" onclick="closeSubPagePanel();" style="margin-top: 4px;margin-right: 4px;  " class="close" ></a>
        </h2>
        <div id="subContent" ><!-- <img style="margin:500px;width:50px" src="<%=path%>/static/images/loading/progress.gif"> -->
        

    </div>

</div>
	<!-- / 弹出窗口层 -->

对应的css:

#subPagePanel {
    overflow-y: auto;
    overflow-x: auto;
    width: 640px;
    /* top: 10px !important; */
    left: 10px;
    height: auto/* 320px */;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 99996;
    background-repeat: no-repeat;
    background-position: center;
    display: none;
    border:1px solid #ea4748;
    border-radius: 5px;
}
#subPagePanel h2{
    background-color: #ea4748;
    height: 40px;
    line-height: 40px;
    padding-left: 5px;
    cursor: move;
}

?js 方法:

drag = function ($obj) {
    if (arguments.length == 0) {
        return;
    }
    if ($obj == null || $obj == undefined) {
        return;
    }
    if (typeof  $obj == ‘string‘) {//when $obj is a string
        $obj = $($obj);
    }
    $obj.on({
        mousedown: function (e) {
            e.preventDefault();
            var t = $obj.offset(),
                o = e.pageX - t.left,
                i = e.pageY - t.top;
            $(document).on("mousemove.drag", function (e) {
                $obj.offset({
                    top: e.pageY - i,
                    left: e.pageX - o
                })
            })
        },
        mouseup: function () {
            $(document).unbind("mousemove.drag")
        }
    });
};//drag

??

在页面加载完时就执行drag操作:

$(function(){

    drag("#subPagePanel");

});

看看效果:

?

?

?

?

?

可以拖动的弹出窗

原文：http://hw1287789687.iteye.com/blog/2194511