前端页面，使用 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>