可以拖动的弹出窗-阿里云开发者社区

可以拖动的弹出窗

2016-05-10 1385

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

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

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

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

   Js代码  
    
  
<!--  弹出窗口层 -->  
    <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:

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

可以拖动的弹出窗

热门文章

最新文章

相关电子书