Есть маленький div внутри большого div. Через JS применен Drag'n'Drop к малому div. Необходимо ограничить область перемещения меньшего блока.
Попытка реализации
Но если попробовать резко переместить белый блок влево или вверх, то он "залипнет" недалеко от границы. Как это исправить?
var small = document.getElementById('small');
small.onmousedown = function(e) {
move(e);
function move(e) {
if (e.pageX > 0) {
small.style.left = e.pageX + 'px';
}
if (e.pageY > 0) {
small.style.top = e.pageY + 'px';
}
}
document.onmousemove = function(e) {
move(e);
}
small.onmouseup = function() {
document.onmousemove = null;
small.onmouseup = null
}
}
#big {
width: 12cm;
height: 12cm;
background-color: #DDDDDD;
}
#small {
position: absolute;
left: 0.75cm;
top: 0.75cm;
width: 4cm;
height: 4cm;
background-color: #FFFFFF;
}
Ответ
Для правильного позиционирования small необходимо рассчитать координаты, за которые нельзя этот small выпускать. Т.е. мы имеем четыре границы: верхнюю, нижнюю, левую, правую.
Для наглядности в примере добавлены отступы у big и фон у body
var small = document.getElementById('small');
var big = document.getElementById('big');
//* флаг перетаскивания
var isDrag = false;
//* ограничения, за которые нельзя вытащить small
var limits = {
top: big.offsetTop,
right: big.offsetWidth + big.offsetLeft - small.offsetWidth,
bottom: big.offsetHeight + big.offsetTop - small.offsetHeight,
left: big.offsetLeft
};
//* вкл/выкл режим перетаскивания
small.onmousedown = function(e) {
isDrag = true;
}
document.onmouseup = function() {
isDrag = false;
}
document.onmousemove = function(e) {
if (isDrag) {
move(e);
}
}
//* вычисление координат
function move(e) {
var newLocation = {
x: limits.left,
y: limits.top
};
if (e.pageX > limits.right) {
newLocation.x = limits.right;
} else if (e.pageX > limits.left) {
newLocation.x = e.pageX;
}
if (e.pageY > limits.bottom) {
newLocation.y = limits.bottom;
} else if (e.pageY > limits.top) {
newLocation.y = e.pageY;
}
relocate(newLocation);
}
//* размещение small
function relocate(newLocation) {
small.style.left = newLocation.x + 'px';
small.style.top = newLocation.y + 'px';
}
body {
background: #EEF;
}
#big {
width: 12cm;
height: 12cm;
background-color: #DDDDDD;
margin: 2cm;
}
#small {
position: absolute;
left: 2.75cm;
top: 2.75cm;
width: 4cm;
height: 4cm;
background-color: #FFFFFF;
}
Комментариев нет:
Отправить комментарий