Ограничение перемещения блока
Доброго времени суток и уже с наступившим Днем Защитника Отечества!
Понесло меня для своих нужд создать скрипт обрезки изображения. Код писался не с нуля - подсматривал на 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, время: 23:55. |