<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.echo{
width: 400px;
min-height: 260px;
background: pink;
position: absolute;
} .echo .title{
font: 18px/40px "微软雅黑";
background: #f7f7f7;
padding:0 40px;
color: #666;
cursor: move;
} .echo .title i{
float: right;
font:18px/40px "宋体";
margin-right: -27px;
}
</style>
<body>
<div class="echo">
<h2 class="title">注册<i>&times;</i></h2>
</div>
</body>
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> //1.获取元素 var echo = $('.echo'); var title = echo.children('.title'); var x = 0; var y = 0; var off = 0;//拖动开关 0关闭 1开启 //2.添加鼠标按下事件 title.mousedown(function(e){ //3.根据鼠标的位置-盒子的位置得到鼠标与盒子之间的差值 这个值在移动的过程中不会改变 x = e.clientX - echo.offset().left; y = e.clientY - echo.offset().top; off = 1; }).mousemove(function(e){ //阻止拖动过程中文字被选中
window.getSelection ? window.getSelection().removeAllRanges() : window.document.selection.empty(); //4.添加鼠标移动事件 如果开关关闭直接终止 if(!off){ return ;
} var left = e.clientX - x; var top1 =e.clientY - y; //4.1可以自己定条件限制移动的范围 top1 = top1 <0 ? 0 : top1; left = left<0 ? 0 : left; left = left > $(window).width() - echo.width() ? $(window).width() - echo.width() : left; //5.根据鼠标的位置减当初的差值计算出 盒子移动的位置 echo.css({left:left,top:top1}); }).mouseup(function(){ //鼠标抬起关闭开关 off = 0; }).mouseout(function(){ off = 0; }) </script>
</html>

js窗口拖动 模版的更多相关文章

  1. 基于jQuery页面窗口拖动预览效果

    今天给大家分享一款基于Query页面窗口拖动预览效果.这是一款基于jQuery+HTML5实现的模拟页面窗口显示拖动窗口预览特效.这款实例适用浏览器:IE8.360.FireFox.Chrome.Sa ...

  2. Duilib改进窗口拖动,使整个窗口都能拖动两种方法(转载)

    转载:http://www.cnblogs.com/XiHua/articles/3490490.html 转载:http://blog.csdn.net/lostspeed/article/deta ...

  3. duilib进阶教程 -- 改进窗口拖动 (12)

    现在大家应该都知道caption="0,0,0,32",是指示标题栏区了吧,如果想要整个窗口都能拖动呢? 那直接把高度改成和窗口一样不就得了~O(∩_∩)O~ 嗯,这样是可以,比如 ...

  4. Winform 窗口拖动

    把窗口边框去掉后,窗口拖动问题: private Point mouseOffset; //记录鼠标指针的坐标 private bool isMouseDown = false; //记录鼠标按键是否 ...

  5. MyEclipse 中 添加 js自动完成模版

    MyEclipse 中 添加 js自动完成模版: window>preference>MyEclipse>Files and Editors>JavaScript>Edi ...

  6. 29.QT-自定义窗口拖动、自定义QToolButton/QPushButton开关按钮、界面阴影,声音等总结

    自定义窗口及拖动 1.自定义无边框窗口时,需要将窗口标志设为: Qt::FramelessWindowHint |Qt::WindowSystemMenuHint | Qt::WindowMinMax ...

  7. JS实现拖动div层移动

    JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别----  pageX,pageY,layerX,layerY,clientX,clientY,screen ...

  8. VUE.JS 窗口发生变化时,获取当前窗口的高度。

    VUE.JS # 窗口发生变化时,获取当前窗口的高度. mounted () { const that = this; window.onresize = () => { return (() ...

  9. 利用SendMessage实现窗口拖动

    原文:利用SendMessage实现窗口拖动 利用SendMessage实现窗口拖动                                            周银辉 想想以前用跟踪鼠标位 ...

随机推荐

  1. stats.js随时查看fps

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Java 访问权限修饰符以及protected修饰符的理解

    2017-11-04 22:28:39 访问权限修饰符的权限 访问修饰符protected的权限理解 在Core Java中有这样一段话“在Object类中,clone方法被声明为protected, ...

  3. wpf窗口阴影

    https://www.cnblogs.com/yiyan127/p/6362509.html

  4. CAS操作原理分析

      一.CAS简单介绍     CAS:Compare and Swap, 翻译成比较并交换.     java.util.concurrent包中借助CAS实现了区别于synchronouse同步锁 ...

  5. 20170719xlVBASmartIndent

    Public Sub SmartIndenterProcedure() Dim OneComp As VBComponent Dim StartLine As Long, EndLine As Lon ...

  6. android--------微信 Tinker 热修复 (二)

    前面简单介绍了一下Tinker热修复,今天就来分享一下如何在Android中使用,希望对各位有帮助. 1:Tinker 接入指南 在项目的build.gradle中,添加tinker-patch-gr ...

  7. 关于controller中调用多个service方法的问题

    一般service方法是有事务的,把所有操作封装在一个service方法中是比较安全的. 如果在controller中调用多个service方法,只有查询的情况下是可以这样的.

  8. Jzzhu and Apples CodeForces - 449C (构造,数学)

    大意: 求从[1,n]范围选择尽量多的数对, 使得每对数的gcd>1 考虑所有除2以外且不超过n/2的素数p, 若p倍数可以选择的有偶数个, 直接全部划分即可 有奇数个的话, 余下一个2*p不划 ...

  9. Type cvc-complex-type.2.4.a: Invalid content was found starting with element 'build'.错误的解决方法

    项目突然间爆出了这样的问题: Description Resource Path Location Typecvc-complex-type.2.4.a: Invalid content was fo ...

  10. 『cs231n』作业3问题2选讲_通过代码理解LSTM网络

    LSTM神经元行为分析 LSTM 公式可以描述如下: itftotgtctht=sigmoid(Wixxt+Wihht−1+bi)=sigmoid(Wfxxt+Wfhht−1+bf)=sigmoid( ...