jQuery实现的简单对话框拖动功能示例

2019-11-19 13:43:16

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jQuery实现的简单对话框拖动功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>www.VeVB.COm jquery 拖动</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel=" rel="external nofollow" stylesheet"><style>  *{margin: 0;padding: 0;box-sizing: border-box;-moz-user-select:none;}  body {font: 12px/16px bold 'microsoft yahei,微软雅黑';}  .dragContainer {    width: 382px;    height: 395px;     position: absolute;    top: 50%;    left: 50%;    border: 1px solid red;    margin-left: -191px;    margin-top: -197.5px;  }  .dragContainer .dragtitle {   width: 100%;   height: 35px;   border-bottom: 1px solid red;   text-align: center;   line-height: 35px;  }  .dragContainer .dragtitle:hover {    cursor: move;  }  .dragContainer .content {    width: 100%;    height: 360px;  }  p.buttonGroup {     width: 100%;    text-align: center;     position: absolute;    bottom: 0;    left: 0;    right: 0;    padding: 5px;    border-top: 1px solid red;  }  p.buttonGroup input {    padding: 5px 10px;    color: white;  }  p.buttonGroup input:hover {    cursor: pointer;    cursor: hand;  }  p.buttonGroup input:first-child {    margin-left: 25px;    background: blue;  }  p.buttonGroup input.btn2 {    margin-left: 15px;    background: red;  }  </style></head><body> <div class="dragContainer" id="drag" style="'position:absolute;" >   <p class="dragtitle">标题栏</p>   <div class="content"></div>   <p class="buttonGroup"><input type="button" value="确定"><input type="button" value="取消" class="btn2"></p> </div>  <script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>  <script type="text/javascript">  var mydrag={    mousePoint: {x:0,y:0}, //初始化坐标    drag: function(){      var that=this; //保存当前对象即(mydrag)，如果不保存，在mousedown()里访问不了mydrag这个对象      var targetid=$(".dragtitle");      targetid.mousedown(function(event){        var e=event;        var offsetLeft=targetid.offset().left; //当前div的左偏移距离        var offsetTop=targetid.offset().top;  //当前div的顶部偏移距离          that.mousePoint.x=e.clientX-offsetLeft;//计算鼠标点击时离它自己div的横向距离        that.mousePoint.y=e.clientY-offsetTop;  //计算鼠标点击时离它自己div的纵向距离        $(document).bind('mousemove',move);        e.stopPropagation();      });      function move(event){          var e =event;          var Left=e.clientX-that.mousePoint.x; //移动后，重新计算左偏移和顶部偏移距离          var Top=e.clientY-that.mousePoint.y;          $("#drag").css({'top':Top,'left':Left,'margin':0});          $(document).bind('mouseup',end);          e.stopPropagation();        };        function end(event){          var e = event;             $(document).unbind('mousemove', move);                $(document).unbind('mouseup',end);          e.stopPropagation();        };    }  }  mydrag.drag();  </script></body></html>

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.VeVB.COm/code/HtmlJsRun测试，运行效果如下：