|
Сообщение от Егорыч
|
|
Ссылка на fiddle
|
строки 8, 19, 28, 29 не совсем корректные там.
Вариант с ограничением перемещения ... как рабочий пример.
<!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>