<div class="drag-free-box">тяни</div>
      

.drag-free-box {
  position: absolute;
  width: 70px; height: 70px;
  background: #fe3904;
  border-radius: 10px;
  cursor: grab;
}
 
.drag-free-box.dragging {
  cursor: grabbing;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transform: scale(1.08);
}
      

const box = root.querySelector('.drag-free-box')
let isDragging = false
let offsetX = 0, offsetY = 0
 
box.addEventListener('mousedown', (e) => {
  isDragging = true
  const rect = box.getBoundingClientRect()
  offsetX = e.clientX - rect.left
  offsetY = e.clientY - rect.top
  box.classList.add('dragging')
})
 
root.addEventListener('mousemove', (e) => {
  if (!isDragging) return
  const rootRect = root.getBoundingClientRect()
  box.style.left = (e.clientX - rootRect.left - offsetX) + 'px'
  box.style.top = (e.clientY - rootRect.top - offsetY) + 'px'
})
 
root.addEventListener('mouseup', () => {
  isDragging = false
  box.classList.remove('dragging')
})
 
/* Для мобильных добавьте touchstart/touchmove/touchend.
   Координаты берутся из event.touches[0].clientX/Y.
   В touchmove обязателен event.preventDefault(),
   иначе страница будет скроллиться вместе
   с перетаскиванием. */
      

<div class="drag-snap-box">snap</div>
      

/* Визуальная сетка через CSS-градиент */
[data-demo="drag-snap"] {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}
 
.drag-snap-box {
  position: absolute;
  width: 60px; height: 60px;
  background: #9eff70;
  cursor: grab;
}
      

const cellSize = 60
 
// При mouseup — привязка к ближайшей ячейке
function endDrag() {
  isDragging = false
  const x = parseFloat(box.style.left) || 0
  const y = parseFloat(box.style.top) || 0
  const snappedX = Math.round(x / cellSize) * cellSize
  const snappedY = Math.round(y / cellSize) * cellSize
  box.style.transition = 'left 0.2s ease, top 0.2s ease'
  box.style.left = snappedX + 'px'
  box.style.top = snappedY + 'px'
}
 
/* Math.round округляет до ближайшего
   кратного cellSize. При перемещении
   transition отключается, чтобы объект
   не тормозил за курсором. */
      

<div class="drag-bounds-box">тяни</div>
      

[data-demo="drag-bounds"] {
  border: 2px dashed rgba(255,255,255,0.15);
}
 
.drag-bounds-box {
  position: absolute;
  width: 70px; height: 70px;
  background: #82e1f1;
  cursor: grab;
}
      

function moveDrag(clientX, clientY) {
  if (!isDragging) return
  const rootRect = root.getBoundingClientRect()
  let x = clientX - rootRect.left - offsetX
  let y = clientY - rootRect.top - offsetY
 
  // Ограничение границами контейнера
  const maxX = root.offsetWidth - box.offsetWidth
  const maxY = root.offsetHeight - box.offsetHeight
  x = Math.max(0, Math.min(maxX, x))
  y = Math.max(0, Math.min(maxY, y))
 
  box.style.left = x + 'px'
  box.style.top = y + 'px'
}
/* Math.max(0, ...) не даёт уйти за левый/верхний край.
   Math.min(max, ...) не даёт уйти за правый/нижний. */
      

<div class="drag-item"></div>
<div class="drop-zone">зона 1</div>
<div class="drop-zone">зона 2</div>
<div class="drop-zone">зона 3</div>
      

.drop-zone {
  border: 2px dashed rgba(255,255,255,0.2);
  border-radius: 12px;
  transition: border-color 0.2s ease;
}
 
.drop-zone.drag-over {
  border-color: #9eff70;
  background: rgba(158,255,112,0.08);
}
 
.drop-zone.zone-filled {
  border-color: #9eff70;
  border-style: solid;
}
      

function endDrag() {
  const itemRect = item.getBoundingClientRect()
  const cx = itemRect.left + itemRect.width / 2
  const cy = itemRect.top + itemRect.height / 2
 
  zones.forEach(zone => {
    const zr = zone.getBoundingClientRect()
    const isOver = cx > zr.left && cx < zr.right
                && cy > zr.top && cy < zr.bottom
 
    if (isOver) {
      // Приземляемся в центр зоны
      const rootRect = root.getBoundingClientRect()
      item.style.left = (zr.left - rootRect.left
        + (zr.width - item.offsetWidth) / 2) + 'px'
      item.style.top = (zr.top - rootRect.top
        + (zr.height - item.offsetHeight) / 2) + 'px'
      zone.classList.add('zone-filled')
    }
  })
 
  if (!landed) {
    // Мимо — возвращаемся на старт
    item.style.left = startX + 'px'
    item.style.top = startY + 'px'
  }
}
/* getBoundingClientRect возвращает прямоугольник
   элемента. Сравниваем центр объекта
   с границами зон, чтобы определить попадание. */
      

<div class="drag-sort-list">
  <div class="drag-sort-item">Первый</div>
  <div class="drag-sort-item">Второй</div>
  <div class="drag-sort-item">Третий</div>
  <div class="drag-sort-item">Четвёртый</div>
  <div class="drag-sort-item">Пятый</div>
</div>
      

.drag-sort-item {
  padding: 12px 16px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: white;
  cursor: grab;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
 
.drag-sort-item.sort-dragging {
  opacity: 0.4;
}
 
.drag-sort-placeholder {
  border: 2px dashed rgba(255,255,255,0.2);
  border-radius: 8px;
}
      

items.forEach(item => {
  item.addEventListener('mousedown', (e) => {
    draggedEl = item
    item.classList.add('sort-dragging')
 
    // Создаём плейсхолдер на месте элемента
    placeholder = document.createElement('div')
    placeholder.className = 'drag-sort-placeholder'
    placeholder.style.height = item.offsetHeight + 'px'
    list.insertBefore(placeholder, item.nextSibling)
  })
})
 
function handleMove(clientY) {
  // Определяем, над каким элементом курсор
  const siblings = [...list.querySelectorAll(
    '.drag-sort-item:not(.sort-dragging)'
  )]
  for (const sibling of siblings) {
    const mid = sibling.getBoundingClientRect().top
              + sibling.offsetHeight / 2
    if (clientY < mid) {
      list.insertBefore(placeholder, sibling)
      return
    }
  }
  list.appendChild(placeholder)
}
 
/* При mouseup элемент вставляется
   на место плейсхолдера через insertBefore.
   Переупорядочивание происходит в DOM —
   без отдельного массива данных. */