Создаю ползунок, который можно захватить и перетащить. Написала условия ограничивающие перемещения ползунка в функции myMove пример ниже.
for(var i=0;i<scrolling.length;i++)
{
var s=scrolling[i];
if(s.isDragging){
if(s.x >= s.lineBegin && s.x <= s.lineEnd)
{
var mx=parseInt(e.clientX-offsetX);
var my=parseInt(e.clientY-offsetY);
var dx=mx-startX;
var dy=my-startY;
s.x+=dx;
startX=mx;
startY=my;
}
}
}
Но он все равно уходит за границу и там заклинивает. За пределом отрезка мышкой взаимодействовать с ползунком нельзя. Вот пример на картинке три ползунка. Как исправить, чтобы ползунок перемещался в пределе отрезка и не заклинивал?
img1.jpg
Вот полностью код:
<!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){
if(s.x >= s.lineBegin && s.x <= s.lineEnd)
{
var mx=parseInt(e.clientX-offsetX);
var my=parseInt(e.clientY-offsetY);
var dx=mx-startX;
var dy=my-startY;
s.x+=dx;
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>