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

思想：只有当鼠标是按在一个大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. 从源码看Azkaban作业流下发过程
			
    上一篇零散地罗列了看源码时记录的一些类的信息,这篇完整介绍一个作业流在Azkaban中的执行过程,希望可以帮助刚刚接手Azkaban相关工作的开发.测试. 一.Azkaban简介 Azkaban作为开 ...
    
			
    2. 
						
  2. Apache Ignite之集群应用测试
			
    集群发现机制 在Ignite中的集群号称是无中心的,而且支持命令行启动和嵌入应用启动,所以按理说很简单.而且集群有自动发现机制感觉对于懒人开发来说太好了,抱着试一试的心态测试一下吧. 在Apache  ...
    
			
    3. 
						
  3. JavaScript 字符串实用常操纪要
			
    JavaScript 字符串用于存储和处理文本.因此在编写 JS 代码之时她总如影随形,在你处理用户的输入数据的时候,在读取或设置 DOM 对象的属性时,在操作 Cookie 时,在转换各种不同 Da ...
    
			
    4. 
						
  4. Unity 序列化 总结
			
    查找了 Script Serialization http://docs.unity3d.com/Manual/script-Serialization.html 自定义序列化及例子: http:// ...
    
			
    5. 
						
  5. Hawk 4.6 并行化
			
    并行化 Hawk支持单机并行化,也就是使用多线程获取数据.它可以控制目前所有任务的数量,为了不给网站造成过大的压力,仅当任务池中的任务数量小于一定值后,才会插入新的任务. 你可以在数据清洗的 执行面板 ...
    
			
    6. 
						
  6. 阿里云学生优惠Windows Server 2012 R2安装IIS，ftp等组件，绑定服务器域名，域名解析到服务器，域名备案，以及安装期间错误的解决方案
			
     前言: 这几天终于还是按耐不住买了一个月阿里云的学生优惠.只要是学生,在学信网上注册过,并且支付宝实名认证,就可以用9块9的价格买阿里云的云服务ECS.确实是相当的优惠. 我买的是Windows S ...
    
			
    7. 
						
  7. 【云知道】LoadRunner 录制问题集锦
			
    关键词:各路录制小白汇集于此 虽然知道君对录制不感冒,但总是看到扎堆的人说这些问题,忍不住要站出来了. 百度虽好,帮助了很多小白,但关键是百度并没有排除错误内容,经过历史的几年传播,错的都快变对的了, ...
    
			
    8. 
						
  8. 【C#公共帮助类】 Utils 10年代码，最全的系统帮助类
			
    为大家分享一下个人的一个Utils系统帮助类,可能有些现在有新的技术替代,自行修改哈~ 这个帮助类主要包含:对象转换处理 .分割字符串.截取字符串.删除最后结尾的一个逗号. 删除最后结尾的指定字符后的 ...
    
			
    9. 
						
  9. 程序员必须要知道的Hadoop的一些事实
			
    程序员必须要知道的Hadoop的一些事实.现如今,Apache Hadoop已经无人不知无人不晓.当年雅虎搜索工程师Doug Cutting开发出这个用以创建分布式计算机环境的开源软...... 1: ...
    
			
    10. 
						
  10. Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现
			
    文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ...
    
			
    11.