Katy93,
не назначайте значения, которые выходят за пределы, строка 87, убрать или оставить
- s.width в этой строке, решать вам.
наверно s.width/2 c обеих сторон будет логичнее.
<!DOCTYPE HTML>
<html>
<head>
<title>Scrolling</title>
</head>
<body>
<canvas id="canvas1" width="670" height="500" style="background-color:#eee; border:1px solid #ccc;"></canvas>
<script>
var canvas1, context;
var offsetX, offsetY;
var BB;
var dragok = false;
var scrolling = [];
var startX;
var startY;
scrolling.push({
x: 150,
y: 20,
lineBegin: 150,
lineEnd: 350,
width: 15,
height: 30,
fill: "#444444",
i1: 0,
sDragging: false
});
scrolling.push({
x: 150,
y: 70,
lineBegin: 150,
lineEnd: 350,
width: 15,
height: 30,
fill: "#ff550d",
i1: 1,
isDragging: false
});
scrolling.push({
x: 150,
y: 120,
lineBegin: 150,
lineEnd: 350,
width: 15,
height: 30,
fill: "#800080",
i1: 2,
isDragging: false
});
function myDown(e) {
e.preventDefault();
e.stopPropagation();
dragok = false;
for (var i = 0; i < scrolling.length; i++) {
var s = scrolling[i];
if (s.x >= s.lineBegin) {
var mx = parseInt(e.clientX - offsetX);
var my = parseInt(e.clientY - offsetY);
if (mx > s.x && mx < s.x + s.width && my > s.y && my < s.y + s.height) {
dragok = true;
s.isDragging = true;
}
startX = mx;
startY = my;
}
}
draw();
}
function myUp(e) {
e.preventDefault();
e.stopPropagation();
for (var i = 0; i < scrolling.length; i++) {
scrolling[i].isDragging = false;
}
}
function myMove(e) {
if (dragok) {
e.preventDefault();
e.stopPropagation();
for (var i = 0; i < scrolling.length; i++) {
var s = scrolling[i];
if (s.isDragging) {
var mx = parseInt(e.clientX - offsetX);
var my = parseInt(e.clientY - offsetY);
var dx = mx - startX;
var dy = my - startY;
var k = s.x + dx
k = Math.min(s.lineEnd - s.width, Math.max(s.lineBegin, k));
s.x = k;
startX = mx;
startY = my;
}
}
draw();
}
}
function draw() {
clear();
for (var i = 0; i < scrolling.length; i++) {
rect(scrolling[i]);
line(scrolling[i]);
}
}
function clear() {
context.clearRect(0, 0, canvas1.width, canvas1.height);
}
function rect(r) {
context.fillStyle = r.fill;
context.fillRect(r.x, r.y, r.width, r.height);
}
function line(r) {
context.save();
context.beginPath();
context.moveTo(r.lineBegin, r.y + r.height / 2);
context.lineTo(r.lineBegin, r.y + r.height / 2);
context.lineTo(r.lineEnd, r.y + r.height / 2);
context.strokeStyle = "#000";
context.stroke();
}
function init() {
canvas1 = document.getElementById("canvas1");
context = canvas1.getContext("2d");
BB = canvas1.getBoundingClientRect();
offsetX = BB.left;
offsetY = BB.top;
draw();
document.addEventListener("mousedown", function(evt) {
myDown(evt);
});
document.addEventListener("mouseup", function(evt) {
myUp(evt);
});
document.addEventListener("mousemove", function(evt) {
myMove(evt);
});
}
init();
</script>
</body>
</html>