Страницы

Поиск по вопросам

четверг, 14 марта 2019 г.

Передвижение элемента мышкой (crop image)

При перемещении курсора за пределы изображения, теряется событие mousedown
Как создать правильный обработчик? Как запретить crop выход за пределы изображения? Как добавить возможность изменения размера crop, при crop_image 256х160?
input = document.querySelector('.box input'); input.onchange = function() { image = new Image(); image.src = window.URL.createObjectURL(this.files[0]); this.parentNode.style = 'display: none'; document.querySelector('.box').innerHTML += "

" + image.outerHTML + "
" + "
" + image.outerHTML + "
"; crop = document.querySelector('.crop'); crop_image = document.querySelector('.crop_image img'); crop.onmousedown = function() { this.onmousemove = function(e) { this.style.marginTop = parseInt(this.style.marginTop) + e.movementY + 'px'; this.style.marginLeft = parseInt(this.style.marginLeft) + e.movementX + 'px'; crop_image.style.marginTop = '-' + this.style.marginTop; crop_image.style.marginLeft = '-' + this.style.marginLeft; return false; } this.onmouseup = function() { this.onmousemove = null; } } } .box { position: relative; width: 768px; height: 256px; background: #FFF; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .3); padding: 2px; } .select { position: absolute; width: 100%; cursor: pointer; line-height: 256px; text-align: center; font-family: Segoe UI; font-size: 20px; font-weight: 300; color: #C7254E; } .original_image img { max-height: 256px; } .original_image { position: relative; float: left; overflow: hidden; max-height: 256px; margin-right: 2px; } .crop { position: absolute; top: 0; width: 256px; height: 160px; box-shadow: 0 0 0 512px rgba(0, 0, 0, .4); cursor: move; } .crop_image img { max-height: 256px; } .crop_image { width: 256px; height: 160px; overflow: hidden; }


Ответ

Нужно следить за сдвигом кропа внутри блока с изображением и не выпускать его за рамки относительно ширины изображения.
input = document.querySelector('.box input'); input.onchange = function() { image = new Image(); image.src = window.URL.createObjectURL(this.files[0]); this.parentNode.style = 'display: none'; document.querySelector('.box').innerHTML += "

" + image.outerHTML + "
" + "
" + image.outerHTML + "
"; function getOffset(el) { var _x = 0; var _y = 0; while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { _x += el.offsetLeft - el.scrollLeft; _y += el.offsetTop - el.scrollTop; el = el.offsetParent; } return { top: _y, left: _x }; } image.addEventListener("load", function() { var original = document.querySelector('.original_image'); var min_left = 0; var min_top = 0; var max_right = original.offsetWidth; var max_bottom = original.offsetHeight; crop = document.querySelector('.crop'); crop_image = document.querySelector('.crop_image img'); crop.onmousedown = function() { this.onmousemove = function(e) { var top = ((parseInt(this.style.marginTop) + e.movementY) < min_top) ? min_top : (parseInt(this.style.marginTop) + e.movementY); if (top + crop.offsetHeight > max_bottom) { top -= (top + crop.offsetHeight) - max_bottom; } this.style.marginTop = top + 'px'; var left = ((parseInt(this.style.marginLeft) + e.movementX) < min_left) ? min_left : (parseInt(this.style.marginLeft) + e.movementX); if (left + crop.offsetWidth > max_right) { left -= (left + crop.offsetWidth) - max_right; } this.style.marginLeft = left + 'px'; crop_image.style.marginTop = '-' + this.style.marginTop; crop_image.style.marginLeft = '-' + this.style.marginLeft; return false; } this.onmouseup = function() { this.onmousemove = null; this.onmouseleave = null; this.onmouseup = null; } this.onmouseleave = function() { this.onmousemove = null; this.onmouseleave = null; this.onmouseup = null; } } }); } .box { position: relative; width: 768px; height: 256px; background: #FFF; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .3); padding: 2px; } .select { position: absolute; width: 100%; cursor: pointer; line-height: 256px; text-align: center; font-family: Segoe UI; font-size: 20px; font-weight: 300; color: #C7254E; } .original_image img { max-height: 256px; } .original_image { position: relative; float: left; overflow: hidden; max-height: 256px; margin-right: 2px; } .crop { position: absolute; top: 0; width: 256px; height: 160px; box-shadow: 0 0 0 512px rgba(0, 0, 0, .4); cursor: move; } .crop_image img { max-height: 256px; } .crop_image { width: 256px; height: 160px; overflow: hidden; }

Комментариев нет:

Отправить комментарий