<!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 鼠标拖拽画一个矩形和监听键盘的更多相关文章

  1. ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆

    一.前言 吐槽一下,百度在国内除了百度地图是良心产品外,其他的真的不敢恭维.在上一篇笔记里,我已经实现了自定义的地图测量模块.在百度地图里面(其他地图)都有一个周边搜索的功能,拖拽画一个圆,然后以圆半 ...

  2. 鼠标拖拽定位和DOM各种尺寸详解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  4. WPF 在image控件用鼠标拖拽出矩形

    原文:WPF 在image控件用鼠标拖拽出矩形 版权声明:博客已迁移到 http://lindexi.gitee.io 欢迎访问.如果当前博客图片看不到,请到 http://lindexi.gitee ...

  5. 2018-11-19-WPF-在image控件用鼠标拖拽出矩形

    title author date CreateTime categories WPF 在image控件用鼠标拖拽出矩形 lindexi 2018-11-19 15:35:13 +0800 2018- ...

  6. CSharpGL(20)用unProject和Project实现鼠标拖拽图元

    CSharpGL(20)用unProject和Project实现鼠标拖拽图元 效果图 例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...

  7. JavaScript鼠标拖拽特效及相关问题总结

    #div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...

  8. 一款基于jQuery的支持鼠标拖拽滑动焦点图

    记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...

  9. 【狼】unity 鼠标拖拽物体实现任意角度自旋转

    主要涉及函数 Input.GetAxis(“Mouse x”) 可取得鼠标横向(x轴)移动增量 Input.GetAxis(“Mouse y”) 可取得鼠标竖向(y轴)移动增量 通过勾股定理获取拖拽长 ...

随机推荐

  1. 用css截取字符 css排版隐藏溢出文本

    方法一: <div style="width:300px; overflow:hidden;  text-overflow:ellipsis; white-space:nowrap;& ...

  2. Swift引用计数器

    ARC概述 和4.2+版本的Xcode对OC的支持一样,Swift也是使用ARC来管理内存,文档是这么描述的: Swift uses Automatic Reference Counting(ARC) ...

  3. BZOJ_5415_[Noi2018]归程_kruscal重构树+倍增+最短路

    BZOJ_5415_[Noi2018]归程_kruscal重构树+倍增 Description www.lydsy.com/JudgeOnline/upload/noi2018day1.pdf 好久不 ...

  4. Java笔记(五)

    泛型:JDK1.5版本后出现的新特性.用于解决安全问题,是一个类型安全机制. 好处:将运行期间出现问题ClassCastException,转移到了编译时期.方便程序员解决问题,让运行时问题减少. 避 ...

  5. HDU1203(01背包变形)

    I NEED A OFFER! Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   D ...

  6. 五 pyJWT使用

    PyJWT是一个Python库,用来编码/解码JWT(JSON Web Token)的. 1:安装PyJWT 2:  直接上代码了: import datetime, jwt, time from a ...

  7. bzoj4004

    线性基 构成线性基的个数是定的,所以我们对价值进行贪心就行了,根据拟阵那套理论,我们排个序,然后能塞进去就塞,这样就求出最小值了. 思维江化,只要是多维向量都能用线性基搞. #include<b ...

  8. java中关键字volatile的误解和使用

    在java线程并发处理中,有一个关键字volatile的使用目前存在很大的混淆,以为使用这个关键字,在进行多线程并发处理的时候就可以万事大吉. Java语言是支持多线程的,为了解决线程并发的问题,在语 ...

  9. 微信小程序开发之三元运算符代替wx.if/wx.else

    直接上代码 实现功能为:当fbphotoFirst为空时,src路径为“pic/信息反馈1-1_14.png“,并且点击事件uploadfbphotoFirst有效,否则为路径fbphotoFirst ...

  10. dead code 死代码 无作用的代码

               DatasetVector datasetvector=(DatasetVector)dataset;           if (datasetvector == null) ...