Как вытащить выделение А оно показывает размер региона

Question

Чтобы позволить мыши выдвигать диапазон выбора, отпустите кнопку мыши после выбора и отобразите значения width и height X-axis и Y-axis выбранной области в этих четырех полях.

Это моя проблема. Я надеюсь, что вы можете мне помочь. Спасибо.

Answer 1

Я создал небольшую ручку для одного из возможных решений. Вам нужно настроить его под свой случай.

Coepen Select Area

let isDragging = false;
const startArr=[];
document.getElementById('target_element').addEventListener('mousedown', function(e){
  startArr[0] = e.offsetX;
  startArr[1] = e.offsetY;
  isDragging=true
})

const currentArr=[]
document.getElementById('target_element').addEventListener('mousemove', function(e){
  if (isDragging){
    currentArr[0] = e.offsetX;
    currentArr[1] = e.offsetY;

    const dimensions = getDimensions(startArr, currentArr);
    const parentElement = document.getElementById('target_element');
    parentElement.innerHTML = '';
    const selectWindow = document.createElement('div');
    selectWindow.style.position = 'absolute';
    selectWindow.style.height = dimensions.h+'px';
    selectWindow.style.width = dimensions.w+'px';
    selectWindow.style.top = dimensions.y+'px';
    selectWindow.style.left = dimensions.x+'px';
    selectWindow.style.backgroundColor = 'blue';
    parentElement.appendChild(selectWindow);
    currentArr.length = 0;
  }
})
const finishArr=[];
document.getElementById('target_element').addEventListener('mouseup', function(e){
  if (isDragging){
    finishArr[0] = e.offsetX;
    finishArr[1] = e.offsetY;

    const dimensions = getDimensions(startArr, finishArr);
    document.getElementById('x').innerText = dimensions.x;
    document.getElementById('y').innerText = dimensions.y;
    document.getElementById('w').innerText = dimensions.w;
    document.getElementById('h').innerText = dimensions.h;
    isDragging=false;
  }
})
function getDimensions(startingPoint, finishPoint){
  const top = Math.min(startingPoint[1], finishPoint[1]);
  const bottom = Math.max(startingPoint[1], finishPoint[1]);
  const left = Math.min(startingPoint[0], finishPoint[0]);
  const right = Math.max(startingPoint[0], finishPoint[0]);
  return {
    x: left,
    y: top,
    w: right-left,
    h: bottom-top
  }
}