bootstrap的model动态移动

2022/4/6 6:20:46
编程Tag： 动态 bootstrap model top body left document mouseEndPoint dragModal
本文主要是介绍bootstrap的model动态移动，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
<!-- saved from url=(0066)https://guguji5.github.io/bs-modal-dragable/bs-modal-dragable.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            
        <script src="./bs-modal-dragable_files/jquery.js.下载"></script>
        <script src="./bs-modal-dragable_files/bootstrap.js.下载"></script>
        <link rel="stylesheet" type="text/css" href="./bs-modal-dragable_files/bootstrap.css">
        <style type="text/css">
            .select{
                -moz-user-select:none;/*火狐*/
                -webkit-user-select:none;/*webkit浏览器*/
                -ms-user-select:none;/*IE10*/
                -khtml-user-select:none;/*早期浏览器*/
                user-select:none;
                }
              .modal-header{
                cursor:move;
              }
        </style>
    </head>
    <body class="modal-open select">
        <div class="container-fluid">
            <table class="table table-bordered">
              <thead>
                  <tr><th>id</th>
                  <th>name</th>
                  <th>age</th>
                  <th>job</th>
              </tr></thead>
              <tbody>
                  <tr>
                      <td>1</td>
                      <td>guguji</td>
                      <td>26</td>
                      <td>developer</td>
                  </tr>
                  <tr>
                      <td>2</td>
                      <td>qinling</td>
                      <td>25</td>
                      <td>insurance saler</td>
                  </tr>
                  <tr>
                      <td>3</td>
                      <td>li ke</td>
                      <td>24</td>
                      <td>human reource</td>
                  </tr>
              </tbody>
            </table>
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
              Launch demo modal
            </button>

              <a class="btn btn-primary btn-lg" href="https://github.com/guguji5/bs-modal-dragable">github项目</a>

            <!-- Modal -->
            <div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;"><div class="modal-backdrop fade in"></div>
              <div class="modal-dialog" style="top: 282px; left: 32px;">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                  </div>
                  <div class="modal-body">
                    this is the modal-body areas
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
                </div>
              </div>
            </div>
        </div>
        
    
    <script>

        /** 拖拽模态框*/ 
        var dragModal={
            mouseStartPoint:{"left":0,"top":  0},
            mouseEndPoint : {"left":0,"top":  0},
            mouseDragDown : false,
            basePoint : {"left":0,"top":  0},
            moveTarget:null,
            topleng:0
        }
        $(document).on("mousedown",".modal-header",function(e){
            //webkit内核和火狐禁止文字被选中
            $('body').addClass('select')
            //ie浏览器禁止文字选中
            document.body.onselectstart=document.body.ondrag=function(){
                return false;
                }
            if($(e.target).hasClass("close"))//点关闭按钮不能移动对话框  
                return;  
            dragModal.mouseDragDown = true;  
            dragModal.moveTarget = $(this).parent().parent();         
            dragModal.mouseStartPoint = {"left":e.clientX,"top":  e.pageY};  
            dragModal.basePoint = dragModal.moveTarget.offset();  
            dragModal.topLeng=e.pageY-e.clientY;
        });  
        $(document).on("mouseup",function(e){       
            dragModal.mouseDragDown = false;  
            dragModal.moveTarget = undefined;  
            dragModal.mouseStartPoint = {"left":0,"top":  0};  
            dragModal.basePoint = {"left":0,"top":  0};  
        });  
        $(document).on("mousemove",function(e){  
            if(!dragModal.mouseDragDown || dragModal.moveTarget == undefined)return;          
            var mousX = e.clientX;  
            var mousY = e.pageY;  
            if(mousX < 0)mousX = 0;  
            if(mousY < 0)mousY = 25;  
            dragModal.mouseEndPoint = {"left":mousX,"top": mousY};  
            var width = dragModal.moveTarget.width();  
            var height = dragModal.moveTarget.height();
            var clientWidth=document.body.clientWidth
            var clientHeight=document.body.clientHeight;
            if(dragModal.mouseEndPoint.left<dragModal.mouseStartPoint.left - dragModal.basePoint.left){
                dragModal.mouseEndPoint.left=0;
            }
            else if(dragModal.mouseEndPoint.left>=clientWidth-width+dragModal.mouseStartPoint.left - dragModal.basePoint.left){
                dragModal.mouseEndPoint.left=clientWidth-width-38;
            }else{
                dragModal.mouseEndPoint.left =dragModal.mouseEndPoint.left-(dragModal.mouseStartPoint.left - dragModal.basePoint.left);//移动修正，更平滑  
                
            }
            if(dragModal.mouseEndPoint.top-(dragModal.mouseStartPoint.top - dragModal.basePoint.top)<dragModal.topLeng){
                dragModal.mouseEndPoint.top=dragModal.topLeng;
            }else if(dragModal.mouseEndPoint.top-dragModal.topLeng>clientHeight-height+dragModal.mouseStartPoint.top - dragModal.basePoint.top){
                dragModal.mouseEndPoint.top=clientHeight-height-38+dragModal.topLeng;
            }
            else{
                dragModal.mouseEndPoint.top = dragModal.mouseEndPoint.top - (dragModal.mouseStartPoint.top - dragModal.basePoint.top);           
            }
            dragModal.moveTarget.offset(dragModal.mouseEndPoint);  
        });   
        $(document).on('hidden.bs.modal','.modal',function(e){
            $('.modal-dialog').css({'top': '0px','left': '0px'})
            $('body').removeClass('select')
            document.body.onselectstart=document.body.ondrag=null;
        })
	</script>
<div class="xl-chrome-ext-bar" id="xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}" style="display: none;">
      <div class="xl-chrome-ext-bar__logo"></div>

      <a id="xl_chrome_ext_download" href="javascript:;" class="xl-chrome-ext-bar__option">下载视频</a>
      <a id="xl_chrome_ext_close" href="javascript:;" class="xl-chrome-ext-bar__close"></a>
    </div></body></html>
这篇关于bootstrap的model动态移动的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
bootstrap的model动态移动

相关编程文章
