可以拖动的弹出窗-白红宇

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

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

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

       Js代码   
<!--  弹出窗口层 -->  
    <div id="subPagePanel"  style="display:none;"  >  
    <h2 style="color: #fff;font-weight: bold;" class="ui-icon-close" ><label>发帖</label>  
        <a title="关闭" οnclick="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:

       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 方法:

       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操作:

       Js代码   
$(function(){  
  
    drag("#subPagePanel");  
  
});  

看看效果:

今天又进行了优化:

       Js代码   
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  

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

       Js代码   
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');//保证固定在可视范围内  
};  