Ограничение перемещения блока
Доброго времени суток и уже с наступившим Днем Защитника Отечества!
Понесло меня для своих нужд создать скрипт обрезки изображения. Код писался не с нуля - подсматривал на stackoverflow. Ссылка на fiddle Блок меняет размеры, перемещается, однако хотелось бы ограничить его перемещение внешним блоком. Подскажите куда двигаться и какие проверки делать. |
Нужно знать верхние левые координаты родительского блока и его размеры. А зная размер блока обрезки и его координаты при перемещении легко узнать достигнуты ли границы родителя.
По ссылке, да, двигается, но вот размеры ... |
Цитата:
Вариант с ограничением перемещения ... как рабочий пример.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by mnstrsound</title>
<style type='text/css'>
#cropBlock {
width: 100px;
height: 100px;
position: absolute;
top: 200px;
left: 200px;
border: 1px solid #ccc;
background: url('http://i641.photobucket.com/albums/uu137/R3GYZZ/lobo-cara-r-500x400.jpg');
background-position: -200px -200px;
background-repeat: no-repeat;
cursor: move;
}
#resizeBtn {
bottom: 1px;
right: 1px;
position: absolute;
border: 10px solid #ff0000;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
cursor: pointer;
}
#wrapper {
width: 500px;
height: 400px;
background: url('http://i641.photobucket.com/albums/uu137/R3GYZZ/lobo-cara-r-500x400.jpg') center center no-repeat;
border: 1px solid #ccc;
position: relative;
overflow: hidden;
}
#wrapper:before {
position: absolute;
content: "";
background: rgba(0,0,0,.5);
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
<script>
window.onload=function(){
var startX, startY, startWidth, startHeight, startTop, startLeft;
var cropBlock = document.getElementById('cropBlock');
var resizeBtn = document.getElementById('resizeBtn');
var border = document.getElementById('wrapper');
resizeBtn.addEventListener('mousedown', initResize, false);
cropBlock.addEventListener('mousedown', initDrag, false);
function initResize(e) {
e = e || window.event;
e.stopPropagation();
startX = e.clientX;
startY = e.clientY;
startWidth = cropBlock.offsetWidth;
startHeight = cropBlock.offsetHeight;
document.documentElement.addEventListener('mousemove', doResize, false);
document.documentElement.addEventListener('mouseup', stopResize, false);
}
function doResize(e) {
var width = startWidth + e.clientX - startX;
width < 20 && (width = 20);
var height = startHeight + e.clientY - startY;
height < 20 && (height = 20);
cropBlock.style.width = width + "px";
cropBlock.style.height = height + "px";
}
function stopResize(e) {
document.documentElement.removeEventListener('mousemove', doResize, false);
document.documentElement.removeEventListener('mouseup', stopResize, false);
}
function initDrag(e) {
startX = e.clientX;
startY = e.clientY;
startTop = cropBlock.offsetTop;
startLeft = cropBlock.offsetLeft;
document.documentElement.addEventListener('mousemove', doDrag, false);
document.documentElement.addEventListener('mouseup', stopDrag, false);
}
function doDrag(e) {
var left = startLeft + e.clientX - startX;
left < 0 && (left=0);
left + cropBlock.offsetWidth > border.offsetLeft + border.offsetWidth && (left = border.offsetLeft + border.offsetWidth - cropBlock.offsetWidth - 8);
var top = startTop + e.clientY - startY;
top < 0 && (top=0);
top + cropBlock.offsetHeight > border.offsetTop + border.offsetHeight && (top = border.offsetTop + border.offsetHeight - cropBlock.offsetHeight - 8);
cropBlock.style.top = top + 'px';
cropBlock.style.left = left + 'px';
cropBlock.style.backgroundPosition = '-' + cropBlock.style.left + ' -' + cropBlock.style.top;
}
function stopDrag(e) {
document.documentElement.removeEventListener('mousemove', doDrag, false);
document.documentElement.removeEventListener('mouseup', stopDrag, false);
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="cropBlock">
<span id="resizeBtn"></span>
</div>
</div>
</body>
</html>
|
Спасибо большое, однако не могли бы вы прокомментировать эту запись
left < 0 && (left=0);Впервые вижу такую запись |
Егорыч,
&& второй операнд (left=0) выполнится только в том случае если true результат первого left < 0 if(left < 0) left=0; тоже самое |
Спасибо огромное за разъяснение. На самом деле все логично. А в чем преимущество такой записи перед стандартным if-ом?
Допилил resize так, чтобы нельзя было выйти за пределы границы блока, а также в моем проекте обрезанные изображения будут вписываться в круг, поэтому сделал пропорциональное увеличение ширины и высоты а также задал бордер-радиус. Ссылка тут У меня есть еще один вопрос, зачем вы в своем примере прибавляли border.offsetTop и border.offsetLeft и затем вычитали 8? Переписал немного по другому, по-моему все лаконичней и правильней стало. Ссылку я уже приложил. |
Егорыч,
8 общая ширина рамок(border css) Цитата:
e = event || window.event; нет у вас event e = e || window.event; |
| Часовой пояс GMT +3, время: 06:38. |