Простий спосіб переміщення елементів шляхом перетягування їх у JavaScript

У цій статті мова йде про простий метод переміщення елементів на веб-сторінці шляхом їх перетягування за допомогою JavaScript. Цей метод використовує лише одну подію pointermove і не потребує додаткових флагів або змінних.

See the Pen Untitled by neXau (@nexau) on CodePen.

Пояснення

• $img.onpointermove: Цей рядок коду додає прослухач події pointermove до елемента з ідентифікатором $img.
  
• event.buttons: Ця властивість перевіряє, чи натиснуто будь-яку кнопку миші.
  
• this.offsetLeft: Ця властивість отримує поточний горизонтальний відступ елемента від його найближчого позиціонованого предка.
  
• this.offsetTop: Ця властивість отримує поточний вертикальний відступ елемента від його найближчого позиціонованого предка.
  
• event.movementX: Ця властивість отримує відносне горизонтальне переміщення миші з моменту останньої події миші.
  
• event.movementY: Ця властивість отримує відносне вертикальне переміщення миші з моменту останньої події миші.
  
• this.style.left: Ця властивість встановлює лівий відступ елемента.
  
• this.style.top: Ця властивість встановлює верхній відступ елемента.
  
• this.style.position: Ця властивість встановлює позиціонування елемента на absolute.
  
• this.draggable = false: Ця властивість відключає за замовчуванням перетягування елемента.
  
• this.setPointerCapture(event.pointerId): Ця властивість захоплює вказівник миші для елемента, щоб він отримував усі події миші, навіть якщо миша виходить за межі його меж.

Переваги

Цей метод має ряд переваг:

• Простота: Код короткий і зрозумілий.
• Ефективність: Використовується лише одна подія, що робить код більш економним.
• Надійність: Цей метод не потребує додаткових флагів або змінних, що робить його менш схильним до помилок.