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

思想：只有当鼠标是按在一个大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. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
			
    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
    
			
    2. 
						
  2. 【腾讯bugly干货分享】HTML 5 视频直播一站式扫盲
			
    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1277 视频直 ...
    
			
    3. 
						
  3. C语言  ·  阶乘计算 · 基础练习
			
    问题描述 输入一个正整数n,输出n!的值. 其中n!=1*2*3*-*n. 算法描述 n!可能很大,而计算机能表示的整数范围有限,需要使用高精度计算的方法.使用一个数组A来表示一个大整数a,A[0]表 ...
    
			
    4. 
						
  4. 《LoadRunner12七天速成宝典》来了
			
    看到自己的新书又要发行了,算算从09年第一本书开始,不知不觉已经是第四本书了(帮朋友合写的书不算),每次写完之后都会说太累了,不想再写了,但是却又次次反悔,吞下食言的苦果.如果非要说第四本书的感受,那 ...
    
			
    5. 
						
  5. html中table边框属性
			
    1.向右(横向)合并: <td colspan="5"><span>后台管理系统</span></td> 2.向下(纵向)合并: & ...
    
			
    6. 
						
  6. 【开发软件】 在Mac下配置php开发环境：Apache+php+MySql
			
    本文地址 原文地址   本文提纲: 1. 启动Apache 2. 运行PHP 3. 配置Mysql 4. 使用PHPMyAdmin 5. 附录   有问题请先 看最后的附录   摘要: 系统OS X  ...
    
			
    7. 
						
  7. iOS之开发中常用的颜色及其对应的RGB值
			
      R G B 值   R G B 值   R G B 值 黑色 0 0 0 #000000 黄色 255 255 0 #FFFF00 浅灰蓝色 176 224 230 #B0E0E6 象牙黑 41  ...
    
			
    8. 
						
  8. 安装devtoolset
			
    在运维的工作内,经常要编译安装各种开源组件,以CentOS 6的用户来说,大部分时候用到gcc的时候都是4.4.7版本的,在绝大多数情况下编译一些东西还是够用的,但还是有个别软件对gcc的版本是有要求 ...
    
			
    9. 
						
  9. 算是休息了这么长时间吧！准备学习下python文本处理了，哪位大大有好书推荐的说下！
			
    算是休息了这么长时间吧!准备学习下python文本处理了,哪位大大有好书推荐的说下!
    
			
    10. 
						
  10. 学习笔记 ：DrawText
			
    最近在做一个TStringGrid的自绘处理,在画文字处理上遇到了高度的计算问题.后来经过一段时间还是找到了一些方法: 1.使用TLabel 这个方法是有点绕路的,方法倒是简单,就是使用AutoSiz ...
    
			
    11.