繪制在鼠標位置折疊的水平和垂直線

Question

我想繪制在鼠標位置折疊的水平和垂直線。 我面臨兩個問題

1. 水平線不顯示。 似乎是一些 CSS 問題，但無法弄清楚。
2. 移動鼠標時，線條的重繪不流暢。 它的混亂。 反正我能避免嗎？

小提琴

代碼：

var element = document.getElementById('box');

var drawLines = function(event) {
  var x = event.pageX;
  var y = event.pageY;

  var straightLine = element.querySelector('.straightLine');
  var hrLine = element.querySelector('.hrLine');

  var slTrans = 'translate(' + x + 'px, 0px)';
  var hrTrans = 'translate(0px, ' + y + 'px)';
  if(!straightLine) {
     straightLine = document.createElement('div');
     straightLine.classList.add('straightLine');
     straightLine.style.height = "100%";
     straightLine.style.width = '2px';
     element.appendChild(straightLine);
  }
  straightLine.style.transform = slTrans;

  if(!hrLine) {
     hrLine = document.createElement('div');
     hrLine.style.height = "2px";
     hrLine.classList.add('hrLine');
     hrLine.style.width = '100%';
     element.appendChild(hrLine);
  }
  hrLine.style.transform = hrTrans;
}

element.addEventListener('mousemove', function(event) {
   drawLines(event);
});

element.addEventListener('mousedown', function(event) {
   drawLines(event);   
});

element.addEventListener('mouseup', function(event) {
   drawLines(event);
});

element.addEventListener('mouseout', function(event) {
   drawLines(event);
});

Answer 1

水平線問題可以通過以下方式解決：

.straightLine, .hrLine {
    position: absolute;
    background-color: red;
}

請參閱更新的小提琴。

編輯
您還可以使用以下內容來平滑動畫（您必須調整時間跨度以滿足您的需要：

.straightLine, .hrLine {
    position: absolute;
    background-color: red;
    transition: transform .05s ease-in-out;
}

請參閱更新的小提琴和w3schools.com 。