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

思想：只有当鼠标是按在一个大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. [高并发]Java高并发编程系列开山篇--线程实现
			
    Java是最早开始有并发的语言之一,再过去传统多任务的模式下,人们发现很难解决一些更为复杂的问题,这个时候我们就有了并发. 引用 多线程比多任务更加有挑战.多线程是在同一个程序内部并行执行,因此会对相 ...
    
			
    2. 
						
  2. Chrome出了个小bug：论如何在Chrome下劫持原生只读对象
			
    Chrome出了个小bug:论如何在Chrome下劫持原生只读对象 概述 众所周知,虽然JavaScript是个很灵活的语言,浏览器里很多原生的方法都可以随意覆盖或者重写,比如alert.但是为了保证 ...
    
			
    3. 
						
  3. LeetCode-3LongestSubstringWithoutRepeatingCharacters(C#)
			
    # 题目 3. Longest Substring Without Repeating Characters Given a string, find the length of the longes ...
    
			
    4. 
						
  4. scrapy 知乎用户信息爬虫
			
    zhihu_spider 此项目的功能是爬取知乎用户信息以及人际拓扑关系,爬虫框架使用scrapy,数据存储使用mongo,下载这些数据感觉也没什么用,就当为大家学习scrapy提供一个例子吧.代码地 ...
    
			
    5. 
						
  5. jQuery.Ajax IE8 无效（CORS）
			
    今天在开发的时候,遇到一个问题,$.get()在 IE8 浏览器不起作用,但 Chrome,Firefox 却是可以的,网上资料很多,最后发现是 IE8 默认不支持 CORS 请求,需要手动开启下:  ...
    
			
    6. 
						
  6. 深入理解css3中nth-child和 nth-of-type的区别
			
    在css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type. 但是它们到底有什么区别呢? 其实区别很简单::nth-of-type为什么要叫 ...
    
			
    7. 
						
  7. Android之Pull解析XML
			
    一．Pull解析方法介绍 除了可以使用SAX和DOM解析XML文件,也可以使用Android内置的Pull解析器解析XML文件.Pull解析器的运行方式与SAX解析器相似.它也是事件触发的.Pull解 ...
    
			
    8. 
						
  8. 邻接表的广度优先遍历(java版)
			
    到 0 的权是 91 到 2 的权是 31 到 3 的权是 61 到 4 的权是 7 2 到 0 的权是 22 到 3 的权是 5 3 到 0 的权是 33 到 4 的权是 1 4 到 2 的权是 2 ...
    
			
    9. 
						
  9. 如何开启MySQL 5.7.12 的二进制日志
			
    1. 打开/etc下的my.cnf文件 2. 编辑它,添加内容: log_bin=binary-log   #二进制日志的文件名 server_id=1  #必须指定server_id,这是MySQL ...
    
			
    10. 
						
  10. SSD框架训练自己的数据集
			
    SSD demo中详细介绍了如何在VOC数据集上使用SSD进行物体检测的训练和验证.本文介绍如何使用SSD实现对自己数据集的训练和验证过程,内容包括: 1 数据集的标注2 数据集的转换3 使用SSD如 ...
    
			
    11.