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

思想：只有当鼠标是按在一个大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. RPC 使用中的一些注意点
			
    最近线上碰到一点小问题,分析其原因发现是出在对 RPC 使用上的一些细节掌握不够清晰导致.很多时候我们做业务开发会把 RPC 当作黑盒机制来使用,但若不对黑盒的工作原理有个基本掌握,也容易犯一些误用的 ...
    
			
    2. 
						
  2. 开源：Taurus.MVC 框架
			
    为什么要创造Taurus.MVC: 记得被上一家公司忽悠去负责公司电商平台的时候,情况是这样的: 项目原版是外包给第三方的,使用:WebForm+NHibernate,代码不堪入目,Bug无限,经常点 ...
    
			
    3. 
						
  3. iOS开发系列--Swift语言
			
    概述 Swift是苹果2014年推出的全新的编程语言,它继承了C语言.ObjC的特性,且克服了C语言的兼容性问题.Swift发展过程中不仅保留了ObjC很多语法特性,它也借鉴了多种现代化语言的特点,在 ...
    
			
    4. 
						
  4. 【开源】.Net 动态脚本引擎NScript
			
    开源地址: https://git.oschina.net/chejiangyi/NScript 开源QQ群: .net 开源基础服务  238543768 .Net 动态脚本引擎 NScript   ...
    
			
    5. 
						
  5. 使用cmake自动构建工程
			
    公司引擎是用cmake根据目标平台来构建工程的,刚接触的时候深深体会到cmake的方便:如果目标平台是windows,它可以帮你自动构建出vs工程:如果是安卓,自动构建出eclipse工程,如果是IO ...
    
			
    6. 
						
  6. 4.Android 打包时出现的Android Export aborted because fatal error were founds [closed]
			
    Android 程序开发完成后,如果要发布到互联网上供别人使用,就需要将自己的程序打包成Android 安装包文件(Android Package,APK),其扩展名为.apk.使用run as 也能 ...
    
			
    7. 
						
  7. 使用Expression实现数据的任意字段过滤（1）
			
    在项目常常要和数据表格打交道. 现在BS的通常做法都是前端用一个js的Grid控件, 然后通过ajax的方式从后台加载数据, 然后将数据和Grid绑定. 数据往往不是一页可以显示完的, 所以要加分页: ...
    
			
    8. 
						
  8. Ubuntu下开启php调试模式，显示报错信息
			
    在Ubuntu下php的缺省设置是不显示错误信息的,如果程序出错会显示“无法处理此请求的错误提示”,这在开发环境下非常不方便. 其实我们只要编辑下apache的配置文件就好 1.我的apache 配置 ...
    
			
    9. 
						
  9. Linux 权限设置chmod
			
    Linux中设置权限,一般用chmod命令 1.介绍 权限设置chmod 功能:改变权限命令.常用参数: 1＝x(执行权execute) 2＝w(写权write) 4＝r(读权Read) setuid ...
    
			
    10. 
						
  10. 从myeclipse导入eclipse，不能识别为web项目（java项目转为web项目）
			
    1.进入项目目录,找到.project文件,打开. 2.找到<natures>...</natures>代码段. 3.在第2步的代码段中加入如下标签内容并保存:         ...
    
			
    11.