可以拖动的弹出窗

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

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

实际上弹出窗口就是一个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");

});

看看效果:

 

 

 今天又进行了优化:

drag = function ($obj, hn) {
    if (arguments.length == 0) {
        return;
    }
    if ($obj == null || $obj == undefined) {
        return;
    }
    if (typeof  $obj == 'string') {//when $obj is a string
        $obj = $($obj);
    }
    var $hn = null;
    if (arguments.length > 1) {
        $hn = $obj.find(hn);//div h1,h2...
    } else {
        $hn = $obj.find("h2");
    }
    $hn.on({
        mousedown: function (e) {
            e.preventDefault();
            var t = $obj.offset(),
                o = e.pageX - t.left,
                i = e.pageY - t.top;
            //$obj.css("position", 'fixed');
            $(document).on("mousemove.drag", function (e) {
                $obj.offset({
                    top: e.pageY - i,
                    left: e.pageX - o
                })
            })
        },
        mouseup: function () {
            $(document).unbind("mousemove.drag");
            $obj.css("position", 'fixed');
        }
    });
};//drag

 下面的方法是让对话框显示出来:

var ajaxSubPanel=function(url)
{
	$subContent=$("#subContent");
	showLoadPanel(server_url_prefix+"static/img/loading/progress.gif");
	ajaxHtml(url+"&recordsPerPage=5&random22="+Math.random(),$subContent);//page.js
    $subPagePanel = $('#subPagePanel');
    //$subPagePanel.css("position", 'absolute');//保证下面的语句生效
    $subPagePanel.css("top", (/*com.whuang.hsj.getScroll().top+*/10) + "px");//弹出panel兼容滚动条
    $cboxOverlay.height($(document).height());
    $cboxOverlay.show();
    $subPagePanel.show('normal');
    $subPagePanel.css("position", 'fixed');//保证固定在可视范围内
};