拖拽框---当鼠标按在指定的区域才可进行拖拽

思想：只有当鼠标是按在一个大div里的小div才可拖拽，其他不可；拖拽框有多种方法，这里以其中一种分享；
下面使我自己写的demo，简单有效。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>
简单的设置一下样式，样式可自己随意设置

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .a{

            width:500px;

            height:300px;

            background:red;

            position: absolute;

            top:100px;

            left: 100px;

        }

        .h{

            width: 100%;

            height: 20px;

            line-height: 20px;

            background: pink;

            text-align: center;

            display: none;

        }

    </style>

</head>

<body>

  <div class="a"><h5 class="h">鼠标按着这里才可拖动</h5></div>

  <script>

      var na=document.getElementsByClassName("a")[0];

      var h=na.children[0];

      na.onmousedown=function (event) {

          if(event.pageY-na.offsetTop<=h.offsetHeight){

                  var x=event.pageX-this.offsetLeft;

                  var y=event.pageY-this.offsetTop;

                  document.onmousemove=function (event){

                      na .style.left=event.pageX-x+"px";

                      na.style.top=event.pageY-y+"px";

                  }

                  na.onmouseup=function () {

                  document.onmousemove=null;

                  };

              }

          else {

              h.style.display="block";

               }

      }

  </script>

</body>

</html>


效果图如下：




 
												


											
HTML中的拖拉框----在路上（29）的更多相关文章
	

    
								
  1. Html中的文本框和单选按钮
		
    Html中的文本框和单选按钮用来制作页面的登录注册使用.. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN& ...
    
		
    2. 
						
  2. VC MFC在CMFCToolBar工具栏中加入组合框
		
    如何在CMFCToolBar工具栏中加入组合框等控件,且先看在线MSDN上怎么说的: 要增加一个组合框,需要完成以下步骤: 1.在工具栏资源中,增加一个对应ID资源号的按钮. 2.在主框架(mainf ...
    
		
    3. 
						
  3. extjs在窗体中添加搜索框
		
    在extjs中添加搜索框,搜索框代码如下: this.searchField = new Ext.ux.form.SearchField({            store : this.store ...
    
		
    4. 
						
  4. (三)在js(jquery)中获得文本框焦点和失去焦点的方法
		
    在js(jquery)中获得文本框焦点和失去焦点的方法   文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...
    
		
    5. 
						
  5. word中创建文本框
		
    word中创建文本框         在插入中点击"文本框"选项卡,例如以下图所看到的:        手工加入自己想要的文本框格式,然后选择所创建的文本框,在工具栏处会发现多了一 ...
    
		
    6. 
						
  6. 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法
		
    好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...
    
		
    7. 
						
  7. Delphi中 弹出框的用法
		
    Delphi中的提示框有 Application.MessageBox  ShowMessage messagedlg 个人认为 相对来说 Application.MessageBox 更加灵活 也相 ...
    
		
    8. 
						
  8. 单击行，自己主动选中当前行中的单选框button
		
    需求:单击行,自己主动选中当前行中的单选框button. aspx页面: <asp:Repeater ID="rptRecordList" runat="serve ...
    
		
    9. 
						
  9. Asp.net中使用文本框的值动态生成控件的方法
		
    这篇文章主要介绍了Asp.net中使用文本框的值动态生成控件的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下 看到一个网友,有论坛上问及,动态的生成checkbox控件,在文本框中输入一个“花 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 01.SQLServer性能优化之----强大的文件组----分盘存储
			
    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 文章内容皆自己的理解,如有不足之处欢迎指正~谢谢 前天有学弟问逆天:“逆天,有没有一种方 ...
    
			
    2. 
						
  2. 探真无阻塞加载javascript脚本技术，我们会发现很多意想不到的秘密
			
    下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问 ...
    
			
    3. 
						
  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统（72）-微信公众平台开发-消息处理
			
    系列目录 前言 Senparc.Weixin.MP SDK提供了MessageHandler消息处理类 在作者的Wiki中也详细说明了如何定义这个类,下面我们来演示,消息的回复,及效果 了解Messa ...
    
			
    4. 
						
  4. iOS开发之ReactiveCocoa下的MVVM（干货分享）
			
    最近工作比较忙,但还是出来更新博客了,今天给大家分享一些ReactiveCocoa以及MVVM的一些东西,干活还是比较足的.在之前发表过一篇博文,名字叫做<iOS开发之浅谈MVVM的架构设计与团 ...
    
			
    5. 
						
  5. Collection集合
			
    一些关于集合内部算法可以查阅这篇文章<容器类总结>. (Abstract+) Collection 子类:List,Queue,Set 增: add(E):boolean addAll(C ...
    
			
    6. 
						
  6. TemplateMethod(模块方法模式)
			
    /** * 模块模式 * @author TMAC-J * 将一个完整的算法分离,分成不同的模块 * 用于有很多步骤的时候,可能以后这些步骤还会增加,把这些步骤分离 * 将有共性的部分放在抽象类中 * ...
    
			
    7. 
						
  7. 关于Genymotion下载比较慢的解决办法
			
    Genymotion号称Android模拟器中运行最快的,但是服务器在国外,Android镜像下载起来那个速度就不想说了. Add new device后下载速度太慢了,容易失败 先登录,然后add, ...
    
			
    8. 
						
  8. ubuntu系统(华硕笔记本)屏幕亮度用Fn控制的调节设置
			
    亲测配置: 系统:Linux lite 3.2 x86_64(Ubuntu其他版本可参考修改) 笔记本:华硕(asus)1201N 达到的效果: 可以正常使用Fn+F5调暗,Fn+F6调亮. 设置步骤 ...
    
			
    9. 
						
  9. cmd窗口编码设置
			
    问题描述:不知道误操作了什么,导致cmd窗口的鼠标显示位置出现错位,如下: 现在要将鼠标位置调整回来. 使用工具:cmd. 操作步骤: 1.查看cmd属性可以看到 可以看到是UTF-8编码格式的,我们 ...
    
			
    10. 
						
  10. PowerShell 数组以及XML操作
			
    PowerShell基础 PowerShell数组操作 将字符串拆分成数据的操作 cls #原始字符串 $str = "abc,def,ghi,mon" #数据定义 #$StrAr ...
    
			
    11.