Как сделать, чтобы ползунок перемещался только в пределах отрезка?
Вложений: 1
Создаю ползунок, который можно захватить и перетащить. Написала условия ограничивающие перемещения ползунка в функции 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;
}
}
}
Но он все равно уходит за границу и там заклинивает. За пределом отрезка мышкой взаимодействовать с ползунком нельзя. Вот пример на картинке три ползунка. Как исправить, чтобы ползунок перемещался в пределе отрезка и не заклинивал? Вложение 4599 Вот полностью код: <!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>
|
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>
|
Спасибо за помощь, теперь работает.
|
| Часовой пояс GMT +3, время: 08:04. |