Двигать div с помощью мышки и получать его left и top

Question

Как сделать так что когда перемещаешь див мышкой моментально выводились его left и top ?

        var div = document.getElementById('circle');
        var listener = (e) => {
          div.style.left = e.pageX - 50 + "px";
          div.style.top = e.pageY - 50 + "px";
        };
        
        circle.addEventListener('mousedown', e => {
            document.addEventListener('mousemove', listener);
        });
        
        circle.addEventListener('mouseup', e => {
            document.removeEventListener('mousemove', listener);
        });
        console.log(div)

        .block1 {
          width: 100px;
          height: 100px;
          position: absolute;
          left: 50px;
          top: 50px;
          border-radius: 50%;
          background: blue;
        }

    <html lang="en">
    <body>
      <div class="block1" id="circle"></div>
    </body>
    </html>

Answer 1

Все что нужно у вас уже есть:

есть обработчики события мыши, которые отслеживают движения курсора
есть актуальные значение позиции курсора и круга

div.style.left = e.pageX - 50 + "px";
div.style.top = e.pageY - 50 + "px";

Они у Вас получаются при перемещении мыши.
Для получения значения left и top вы вычитаете из них радиус круга

Все что Вам осталось - это просто их вывести в интерфейс.
Для этого нужно сначала добавить верстку блока в который вы будете выводить информацию

<div id="position_panel">
    <strong>left</strong> = <span id="left_value"></span><br/>
    <strong>top</strong> = <span id="top_value"></span>
</div>

В элементы, в которых будут выводиться непосредственно значения желательно заблогавременно добавить атриибут id, чтобы позже их можно было найти в JS, чтобы обновить текст в данных элементах.

их идентификаторы left_value и top_value соответственно.

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

#position_panel {
    position: absolute;
    width: 90px;
    height: 40px;
    padding: 10px 30px;
    background-color: #343434;
    color: #FFFFFF;
}

И контрастное оформление, чтобы их сразу можно было заметить

В JS необходимо сначала получить данные элементы

var leftValue = document.getElementById('left_value'),
    topValue = document.getElementById('top_value');

И в обработчике просто установить текст внутри данных элементов равный тем же значениям
Для этого достаточно указать значение свойства innerText интересующего нас элемента

var listener = (e) => {
    // ...
    leftValue.innerText = e.pageX - 50;
    topValue.innerText  = e.pageY - 50;  
};

т.к. e.pageX - 50 и e.pageY - 50 используются дважды при установке текста и при установки смещения круга - оформим их в виде отдельных переменных

var left = e.pageX - 50,
    top  = e.pageY - 50;

и уже их можно будет прокинуть в текст и в стили

Итого:

var div = document.getElementById('circle'),
    leftValue = document.getElementById('left_value'),
    topValue = document.getElementById('top_value');


var listener = (e) => {
  var left = e.pageX - 50,
      top = e.pageY - 50;
  
  div.style.left = left + "px";
  div.style.top  = top + "px";
  
  leftValue.innerText = left;
  topValue.innerText  = top;  
};

circle.addEventListener('mousedown', e => {
    document.addEventListener('mousemove', listener);
});

circle.addEventListener('mouseup', e => {
    document.removeEventListener('mousemove', listener);
});
console.log(div)

.block1 {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50px;
    top: 50px;
    border-radius: 50%;
    background: blue;
}
#position_panel {
    position: absolute;
    width: 90px;
    height: 40px;
    padding: 10px 30px;
    background-color: #343434;
    color: #FFFFFF;
}

<html lang="en">
    <body>
      <div id="position_panel">
          <strong>left</strong> = <span id="left_value">0</span><br/>
          <strong>top</strong> = <span id="top_value">0</span>
      </div>
      <div class="block1" id="circle"></div>
    </body>
    </html>

БЛОГ НА HUSL

Двигать div с помощью мышки и получать его left и top

Ответы (1 шт):