HTML中的拖拉框----在路上（29）
拖拽框---当鼠标按在指定的区域才可进行拖拽 思想：只有当鼠标是按在一个大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）的更多相关文章
- Html中的文本框和单选按钮
Html中的文本框和单选按钮用来制作页面的登录注册使用.. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN& ...
- VC MFC在CMFCToolBar工具栏中加入组合框
如何在CMFCToolBar工具栏中加入组合框等控件,且先看在线MSDN上怎么说的: 要增加一个组合框,需要完成以下步骤: 1.在工具栏资源中,增加一个对应ID资源号的按钮. 2.在主框架(mainf ...
- extjs在窗体中添加搜索框
在extjs中添加搜索框,搜索框代码如下: this.searchField = new Ext.ux.form.SearchField({ store : this.store ...
- (三)在js(jquery)中获得文本框焦点和失去焦点的方法
在js(jquery)中获得文本框焦点和失去焦点的方法 文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...
- word中创建文本框
word中创建文本框 在插入中点击"文本框"选项卡,例如以下图所看到的: 手工加入自己想要的文本框格式,然后选择所创建的文本框,在工具栏处会发现多了一 ...
- 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法
好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...
- Delphi中 弹出框的用法
Delphi中的提示框有 Application.MessageBox ShowMessage messagedlg 个人认为 相对来说 Application.MessageBox 更加灵活 也相 ...
- 单击行，自己主动选中当前行中的单选框button
需求:单击行,自己主动选中当前行中的单选框button. aspx页面: <asp:Repeater ID="rptRecordList" runat="serve ...
- Asp.net中使用文本框的值动态生成控件的方法
这篇文章主要介绍了Asp.net中使用文本框的值动态生成控件的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下 看到一个网友,有论坛上问及,动态的生成checkbox控件,在文本框中输入一个“花 ...
随机推荐
- Python高手之路【三】python基础之函数
基本数据类型补充: set 是一个无序且不重复的元素集合 class set(object): """ set() -> new empty set object ...
- 【翻译】MongoDB指南/CRUD操作（四）
[原文地址]https://docs.mongodb.com/manual/ CRUD操作(四) 1 查询方案(Query Plans) MongoDB 查询优化程序处理查询并且针对给定可利用的索引选 ...
- python笔记（持续更新）
1.编译python遇到下面的编码问题: SyntaxError: Non-ASCII character '\xe9' in file E:\projects\learn.py on lin ...
- 使用Microsoft的IoC框架：Unity来对.NET应用进行解耦
1.IoC/DI简介 IoC 即 Inversion of Control,DI 即 Dependency Injection,前一个中文含义为控制反转,后一个译为依赖注入,可以理解成一种编程模式,详 ...
- java springMVC SSM 操作日志 4级别联动 文件管理 头像编辑 shiro redis
A 调用摄像头拍照,自定义裁剪编辑头像 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单; 技术:313596790freemaker模版技术 ,0个代码不用写 ...
- Unity C#最佳实践（上）
本文为<effective c#>的读书笔记,此书类似于大名鼎鼎的<effective c++>,是入门后提高水平的进阶读物,此书提出了50个改进c#代码的原则,但是由于主要针 ...
- hibernate-mapping-3.0.dtd；hibernate-configuration-3.0.dtd；hibernate.properties所在路径
hibernate-mapping-3.0.dtd 所在路径:hibernate-release-5.2.5.Final\project\hibernate-core\src\main\resourc ...
- CYQ.Data V5 从入门到放弃ORM系列：教程 - Log、SysLogs两个日志类使用
Log 静态类介绍: Public Static (Shared) Methods GetExceptionMessage 获取异常的内部信息 WriteLogToDB Overloaded. 将日志 ...
- 如何安装并简单的使用OwinHost——Katana
微软OWIN的提出必然会引起一场风暴,而我们作为C#阵营中一份子,自然免不了会卷入其中.OWIN是什么东西,我在这里就不解析了,还不知道是OWIN是什么的读者请打开浏览器,然后搜索即可,中文的英文的应 ...
- Xamarin.Android之ContentProvider
一.前言 掌握了如何使用SQLiteOpenHelper之后,我们就可以进行下一步的学习.本章我们将会学习如何使用ContentProvider来将数据库方面的操作封装起来,同时它还可以供其他应用访问 ...