Границы в drag`n`drop

Question

я создал Drag and Drop но не могу понять что не работает, консоль ошибок не выдаёт, уже 2 часа пытаюсь что-то сделать, Но нет

// находим наши объекты
var krug = document.querySelector('.krug');
var gran = document.querySelector('.gran');
var drag = false;

// дальше мы делаем лимиты(границы) передвижения круга
var limit = {
  top: gran.offsetTop, // для: верха
  right: gran.offsetWidth + gran.offsetLeft - krug.offsetWidth, // права
  bottom: gran.offsetHeight + gran.offsetTop - krug.offsetHeight, // низа
  left: gran.offsetLeft, // лева
};

// потом делаем включение или выключение drag
krug.onmousedown = function (e) {
  drag = true;
};
document.onmouseup = function () {
  drag = false;
};
document.onmousemove = function (e) {
  if (drag) {
    move(e);
  }
};
// дальше вычисляем координаты для круга
function move(e) {
  var NewLoc = {
    x: limit.left,
    y: limit.top,
  };
  if (e.pageX > limit.right) {
    NewLoc.x = limit.right;
  } else if (e.pageX > limit.left) {
    NewLoc.x = e.pageX;
  }
  if (e.pageY > limit.bottom) {
    NewLoc.y = limit.bottom;
  } else if (e.pageY > limit.top) {
    NewLoc.y = e.pageY;
  }
  ReLoc(NewLoc);
}

function ReLoc(NewLoc) {
  krug.style.top = NewLoc.y + 'px';
  krug.style.left = NewLoc.x + 'px';
}

body {
  background: gray;
}

.gran {
  position: absolute;
  background: rgb(74, 255, 74);
  width: 300px;
  height: 300px;
  top: 25%;
  left: 35%;
  border: 4px solid darkgreen;
}

.krug {
  background: yellow;
  border: 4px solid gray;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      /*  дальше я иду в script.js  */
    </style>

    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Перемещение</title>
  </head>

  <body>
    <!-- для начала я создам наши границы -->
    <div class="gran">
      <!-- в нём я создам ещё объект(круг) -->
      <div class="krug">
        <!-- дальше продолжу в style.css -->
      </div>
    </div>
    <script>

    </script>
  </body>
</html>

Answer 1

Забыли position:absolute для .krug
Неправильные координаты назначаете. см. комментарии в коде ниже.

var krug = document.querySelector('.krug');
var gran = document.querySelector('.gran');
var drag = false;


var limit = {
  top: gran.offsetTop, 
  right: gran.offsetWidth + gran.offsetLeft - krug.offsetWidth,
  bottom: gran.offsetHeight + gran.offsetTop - krug.offsetHeight, 
  left: gran.offsetLeft, 
};


krug.onmousedown = function (e) {
  drag = true;
};
document.onmouseup = function () {
  drag = false;
};

document.onmousemove = function (e) {
  if (drag) {
    move(e);
  }
};

function move(e) {
  /*  
  не усложняйте себе жизнь
  var NewLoc = {
    x: limit.left,
    y: limit.top,
  };*/
  
  
  //задайте просто диапазоны, нужно больше лево и меньше право ( e.pageX >= limit.left && e.pageX =< limit.right)
  /*if (e.pageX > limit.right) {
    NewLoc.x = limit.right;
  } else if (e.pageX > limit.left) {
    NewLoc.x = e.pageX;
  }*/
  //аналогично, нужно меньше верха и больше низа (e.pageY >= limit.bottom && e.pageY <= limit.top)
  /*if (e.pageY > limit.bottom) {
    NewLoc.y = limit.bottom;
  } else if (e.pageY > limit.top) {
    NewLoc.y = e.pageY;
  }*/
  
  
  
  //больше лево и меньше право 
  if (e.pageX >= limit.left && e.pageX <= limit.right) { // по X
    //не забываем, что начало координат позиционирования .krug, находится в левом верхнем углу .gran
    krug.style.left = e.pageX - gran.offsetLeft + 'px'; 
  }
  //больше верха и меньше низа
  if (e.pageY >= limit.top && e.pageY <= limit.bottom){ //по Y
    krug.style.top = e.pageY  - gran.offsetTop + 'px'
  }
}

//переменные, функции и их аргументы принято называть с маленькой буквы
/*function ReLoc(NewLoc) {
  krug.style.top = NewLoc.y + 'px';
  krug.style.left = NewLoc.x + 'px';
}*/

body {
  background: gray;
}

.gran {
  position: absolute;
  background: rgb(74, 255, 74);
  width: 300px;
  height: 300px;
  top: 25%;
  left: 35%;
  border: 4px solid darkgreen;
}

.krug {
  /* + */ position: absolute;
  background: yellow;
  border: 4px solid gray;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

<div class="gran">
  <div class="krug"></div>
</div>

Answer 2

Я предпочитаю рассчитывать перемещение на базе изменения положения курсора. Т.е. мы берем разницу между текущим и предыдущим положением и добавляем смещение к положению объекта. При этом смещение будет происходить относительно точки касания.

Чтобы правильно ограничить перемещение внутри контейнера (с учетом границ), нужно рассчитать допустимый диапазон по X и Y:

let range = {
  X: gran.clientWidth  - krug.offsetWidth,
  Y: gran.clientHeight - krug.offsetHeight,
};

Мы вычитаем из внутреннего размера контейнера - внешний размер круга.

Пробуем:

const prev = { x: 0, y: 0 };

const rangeLimit = (v, a, b) => v > b ? b : (v < a ? a : v);
const savePosition = (e) => {
  prev.x = e.pageX;
  prev.y = e.pageY;
};

var krug = document.querySelector('.krug');
var gran = document.querySelector('.gran');
var drag = false;

// определяем диапазон перемещения внутри gran для krug
let range = {
  X: gran.clientWidth  - krug.offsetWidth,
  Y: gran.clientHeight - krug.offsetHeight,
};

// потом делаем включение или выключение drag
krug.onmousedown = function(e) {
  savePosition(e);
  drag = true;
};
document.onmouseup = function() {
  drag = false;
};
document.onmousemove = function(e) {
  if (drag) move(e);
};

function move(e) {

  let x = krug.offsetLeft + (e.pageX - prev.x);
  let y = krug.offsetTop  + (e.pageY - prev.y);

  x = rangeLimit(x, 0, range.X);
  y = rangeLimit(y, 0, range.Y);

  savePosition(e);
  reLoc(x, y);
}

function reLoc(x, y) {
  krug.style.left = x + 'px';
  krug.style.top  = y + 'px';
}

.gran {
  position: absolute;
  background: rgb(74, 255, 74);
  width: 300px;
  height: 300px;
  top: 25%;
  left: 35%;
  border: 4px solid darkgreen;
}

.krug {
  position: absolute;
  background: yellow;
  border: 4px solid gray;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

<div class="gran">
  <div class="krug">
  </div>
</div>

БЛОГ НА HUSL

Границы в drag`n`drop

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