前端页面，使用 dom 鼠标拖拽画一个矩形和监听键盘
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.container {
background: green;
height: 200px;
position: relative;
margin-left: 100px;
}
.rect {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 1px solid red;
background: rgba(230, 230, 230, 0.5);
}
</style>
</head>
<body>
<div class="container">
<div class="rect"></div>
</div>
<script>
var $container = $(".container");
var $rect = $(".rect");
var parentOffset = $container.offset()
var startPoint = null;
var isDown = null;
function init(opts) {
$rect.css({
top: opts.top + 'px',
left: opts.left + 'px'
});
$rect.width(opts.width);
$rect.height(opts.height);
}
function reset() {
init({
top: 0,
left: 0,
width: 0,
height: 0
});
$rect.hide();
}
reset();
$rect.on('click', function(e) {
edit()
});
$container.on('mousedown', function(e) {
start(e);
});
$container.on("mousemove", function(e) {
move(e);
})
$container.on('mouseup', function(e) {
end(e);
});
$container.on('mouseleave', function(e) {
end(e);
});
document.addEventListener("keydown", keydown);
function start(e) {
var re1 = $(e.target);
if (re1.is($rect)) {
return
}
isDown = true;
$rect.width(0);
$rect.height(0);
$rect.show();
startPoint = {
y: e.pageY - parentOffset.top,
x: e.pageX - parentOffset.left
};
$rect.css({
top: startPoint.y + 'px',
left: + startPoint.x + 'px'
});
}
function move(e) {
if (isDown) {
$rect.width((e.pageX - parentOffset.left) - startPoint.x);
$rect.height((e.pageY - parentOffset.top )- startPoint.y);
}
}
function end(e) {
if (!isDown) {
return;
}
var x = e.pageX > (parentOffset.left + $container.width()) ? parentOffset.left + $container.width() : e.pageX;
var y = e.pageY > (parentOffset.top + $container.height()) ? parentOffset.top + $container.height() : e.pageY;
$rect.width((x - parentOffset.left) - startPoint.x);
$rect.height((y - parentOffset.top )- startPoint.y);
isDown = false;
startPoint = null;
save();
}
function save() {
console.log({
top: $rect.position().top,
left: $rect.position().left,
width: $rect.width(),
height: $rect.height()
})
}
function edit() {
console.log('edit');
}
function goNext() {
console.log('goNext');
}
function goPrev() {
console.log('goPrev');
}
function keydown(e) {
if (e.key === 'd' || e.key === "Delete") {
reset();
e.preventDefault();
} else if (e.key === 'e') {
edit();
e.preventDefault();
} else if (e.key === 'ArrowRight' || e.key === "f" || e.key === "Enter") {
goNext();
e.preventDefault();
} else if (e.key === 'ArrowLeft' || e.key === "s") {
goPrev();
e.preventDefault();
}
}
</script>
</body>
</html>
前端页面，使用 dom 鼠标拖拽画一个矩形和监听键盘的更多相关文章
- ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆
一.前言 吐槽一下,百度在国内除了百度地图是良心产品外,其他的真的不敢恭维.在上一篇笔记里,我已经实现了自定义的地图测量模块.在百度地图里面(其他地图)都有一个周边搜索的功能,拖拽画一个圆,然后以圆半 ...
- 鼠标拖拽定位和DOM各种尺寸详解
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- WPF 在image控件用鼠标拖拽出矩形
原文:WPF 在image控件用鼠标拖拽出矩形 版权声明:博客已迁移到 http://lindexi.gitee.io 欢迎访问.如果当前博客图片看不到,请到 http://lindexi.gitee ...
- 2018-11-19-WPF-在image控件用鼠标拖拽出矩形
title author date CreateTime categories WPF 在image控件用鼠标拖拽出矩形 lindexi 2018-11-19 15:35:13 +0800 2018- ...
- CSharpGL(20)用unProject和Project实现鼠标拖拽图元
CSharpGL(20)用unProject和Project实现鼠标拖拽图元 效果图 例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...
- JavaScript鼠标拖拽特效及相关问题总结
#div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...
- 一款基于jQuery的支持鼠标拖拽滑动焦点图
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...
- 【狼】unity 鼠标拖拽物体实现任意角度自旋转
主要涉及函数 Input.GetAxis(“Mouse x”) 可取得鼠标横向(x轴)移动增量 Input.GetAxis(“Mouse y”) 可取得鼠标竖向(y轴)移动增量 通过勾股定理获取拖拽长 ...
随机推荐
- Relocation POJ-2923
题目链接 题目意思: 有 n 个货物,并且知道了每个货物的重量,每次用载重量分别为c1,c2的火车装载,问最少需要运送多少次可以将货物运完. 分析:本题可以用二进制枚举所有不冲突的方案,再来dp 一下 ...
- adb 读写模式 挂载文件系统
删除需要把system挂载为读写,用到了这篇文章的这个命令: shell@android:/ # mount -o rw,remount yassf2 /system/ 完整文章转自:http:/ ...
- bzoj 2006 [NOI2010]超级钢琴——ST表+堆
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2006 每个右端点的左端点在一个区间内:用堆记录端点位置.可选区间,按价值排序:拿出一个后也许 ...
- ElasticSearch基础之映射mapping
[01]什么是mapping? 首先去看看官方文档,非常重要:https://www.elastic.co/guide/en/elasticsearch/reference/current/mappi ...
- Java代码加密与反编译（一）：利用混淆器工具proGuard对jar包加密
Java 代码编译后生成的 .class 中包含有源代码中的所有信息(不包括注释),尤其是在其中保存有调试信息的时候.所以一个按照正常方式编译的 Java .class 文件可以非常轻易地被反编译.通 ...
- Flutter实战视频-移动电商-10.首页_FlutterSwiper轮播效果制作
10.首页_FlutterSwiper轮播效果制作 博客地址: https://jspang.com/post/FlutterShop.html#toc-5c2 flutter_swiper http ...
- Flutter实战视频-移动电商-18.首页_火爆专区后台接口调试
18.首页_火爆专区后台接口调试 楼层结束之后有个火爆专区.到地图有个上拉加载的效果 lib/config/service_url.dart 首先找到我们的接口配置文件,增加接口的配置 lib/ser ...
- 验证网站SiteMap的工具
验证网站SiteMap的在线工具 http://www.xmlvalidation.com/ 在SiteMap文件中,不能直接这样写url "http://www.obriensplast ...
- 《剑指offer》面试题1：为类CMyString添加赋值运算符函数——C++拷贝构造函数与赋值函数
题中已给出CMyString的类定义,要求写赋值运算符函数. #include<iostream> #include<cstring> using namespace std; ...
- 51nod 1068【简单博弈】
思路 手动打表, N 1 : A出1 A胜: 2 : A出2 A胜: 3 : A只能出2的整数幂&&这个数<=3,所以只能出1,2:A出1的时候,B就是2的情况,B胜:A出2的时 ...