Блог

Главная - Вопросы по программированию - Ограничение верхней и нижней части слайдера

Ограничение верхней и нижней части слайдера

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я работаю над простым слайдером, но у меня возникают проблемы с его остановкой, когда он достигает своих пределов.

Итак, по сути, я хочу, чтобы элемент рычага останавливался в верхнем и нижнем положениях, даже если пользователь пытается превзойти его.

Я хотел бы избежать чего-либо, кроме чистого кода JS и / или ECMA.

Вот мой небольшой проект:

 s_Title.innerHTML = "mySlider";

dragSlider(document.getElementById("mySlider"));
var maxPos = document.getElementById("s_Groove").offsetTop - (s_Lever.offsetHeight/2);
var minPos = document.getElementById("s_Groove").offsetTop   document.getElementById("s_Groove").offsetHeight   (s_Lever.offsetHeight/2);

// Initialize SP value
document.getElementById("s_SP").innerHTML = s_Lever.offsetTop;

function dragSlider() {

    let start_Pos = 0;
    let final_Pos = 0;

    document.getElementById("s_Lever").onmousedown = dragMouseDown;

    function dragMouseDown(e) {

        e = e || window.event;
        e.preventDefault();

        // get the mouse cursor position at startup:
        start_Pos = e.clientY;
        document.onmouseup = closeDragElement;

        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
    }
    
    function elementDrag(e) {
        document.getElementById("s_SP").innerHTML = e.clientY;

        e = e || window.event;
        e.preventDefault();

        // calculate the new cursor position:
        final_Pos = start_Pos - e.clientY;
        start_Pos = e.clientY;

        // set the element's new position:
        s_Lever.style.top = (s_Lever.offsetTop - final_Pos)   "px";

        if(s_Lever.style.top <= maxPos) {
            s_Lever.style.top = maxPos;
        }
        else if(s_Lever.style.top >= minPos) {
            s_Lever.style.top = minPos;
        }
    }
    
    function closeDragElement() {
        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
    }
}  
 body{
    position: absolute;

    left: 0px;
    top: 0px;

    border: 0px;
    margin: 0px;
    padding: 0px;

    background-color: #C0C0C0;
}

#mySlider{
    position: absolute;

    left: 50px;
    top: 50px;

    width: 100px;
    height: 500px;

    border: 2px solid black;
    border-left: 2px solid white;
    border-top: 2px solid white;
    border-radius: 10px;

    margin: 0px;
    padding: 0px;

    background-color: #C0C0C0;
}

#s_Title{
    position: absolute;

    left: 0px;
    left: 0px;
    top: 0px;

    width: 100px;
    height: 40px;

    border-Bottom: 2px solid black;

    margin: 0px;
    padding: 0px;

    background-color:transparent;

    font-family: Arial;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
}

#s_Groove{
    position: absolute;

    left: 40px;
    top: 60px;

    width: 16px;
    height: 376px;

    border: 2px solid black;
    border-right: 2px solid white;
    border-bottom:2px solid white;

    margin: 0px;
    padding: 0px;

    background-color: #B0B0B0;
}

#s_Lever{
    position: absolute;

    left: 20px;
    top: 428px;

    width: 56px;
    height: 20px;

    border: 2px solid black;
    border-left: 2px solid white;
    border-top:2px solid white;

    margin: 0px;
    padding: 0px;

    background-color: #00FF0088;
}

#s_SP{
    position: absolute;

    left: 0px;
    top: 458px;

    width: 100px;
    height: 40px;

    border-top: 2px solid black;

    margin: 0px;
    padding: 0px;

    background-color: transparent;

    font-family: Arial;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
}  
 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="mySlider" content="Example of a slider">
        <meta name="keywords" content="slider">
        <meta name="author" content="J. V., Andrade">
        <meta name="viewport" contetn="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="mySlider">
            <div id="s_Title"></div>
            <div id="s_Groove"></div>
            <div id="s_Lever"></div>
            <div id="s_SP"></div>
        </div>

        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

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

1. Вы пытались ограничить эту переменную? final_Pos

Ответ №1:

Вы ошиблись с этим:

 if (s_Lever.style.top <= maxPos)...

s_Lever.style.top является строкой (с «px»), maxPos является числом. Вам нужно исправить это, а также добавить «px» в поле назначить стиль сверху внутри этой команды if

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

1. Спасибо, я протестирую это!

Ответ №2:

Попробуйте так:

 s_Title.innerHTML = "mySlider";

dragSlider(document.getElementById("mySlider"));
var maxPos = document.getElementById("s_Groove").offsetTop - (s_Lever.offsetHeight/2);
var minPos = document.getElementById("s_Groove").offsetTop   document.getElementById("s_Groove").offsetHeight - (s_Lever.offsetHeight/2);

// Initialize SP value
document.getElementById("s_SP").innerHTML = s_Lever.offsetTop;

function dragSlider() {

    let start_Pos = 0;
    let final_Pos = 0;

    document.getElementById("s_Lever").onmousedown = dragMouseDown;

    function dragMouseDown(e) {

        e = e || window.event;
        e.preventDefault();

        // get the mouse cursor position at startup:
        start_Pos = e.clientY;
        document.onmouseup = closeDragElement;

        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
    }
    
    function elementDrag(e) {
        let new_Pos = 0;
        
        document.getElementById("s_SP").innerHTML = e.clientY;

        e = e || window.event;
        e.preventDefault();

        // calculate the new cursor position:
        final_Pos = start_Pos - e.clientY;
        start_Pos = e.clientY;
        new_Pos = s_Lever.offsetTop - final_Pos

        // set the element's new position:

        if(new_Pos <= maxPos) {
            s_Lever.style.top = maxPos   "px";
        }
        else if(new_Pos >= minPos) {
            s_Lever.style.top = minPos   "px";
        } else {
            s_Lever.style.top = new_Pos   "px";
        }
    }
    
    function closeDragElement() {
        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
    }
}  
 body{
    position: absolute;

    left: 0px;
    top: 0px;

    border: 0px;
    margin: 0px;
    padding: 0px;

    background-color: #C0C0C0;
}

#mySlider{
    position: absolute;

    left: 50px;
    top: 50px;

    width: 100px;
    height: 500px;

    border: 2px solid black;
    border-left: 2px solid white;
    border-top: 2px solid white;
    border-radius: 10px;

    margin: 0px;
    padding: 0px;

    background-color: #C0C0C0;
}

#s_Title{
    position: absolute;

    left: 0px;
    left: 0px;
    top: 0px;

    width: 100px;
    height: 40px;

    border-Bottom: 2px solid black;

    margin: 0px;
    padding: 0px;

    background-color:transparent;

    font-family: Arial;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
}

#s_Groove{
    position: absolute;

    left: 40px;
    top: 60px;

    width: 16px;
    height: 376px;

    border: 2px solid black;
    border-right: 2px solid white;
    border-bottom:2px solid white;

    margin: 0px;
    padding: 0px;

    background-color: #B0B0B0;
}

#s_Lever{
    position: absolute;

    left: 20px;
    top: 428px;

    width: 56px;
    height: 20px;

    border: 2px solid black;
    border-left: 2px solid white;
    border-top:2px solid white;

    margin: 0px;
    padding: 0px;

    background-color: #00FF0088;
}

#s_SP{
    position: absolute;

    left: 0px;
    top: 458px;

    width: 100px;
    height: 40px;

    border-top: 2px solid black;

    margin: 0px;
    padding: 0px;

    background-color: transparent;

    font-family: Arial;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
}  
 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="mySlider" content="Example of a slider">
        <meta name="keywords" content="slider">
        <meta name="author" content="J. V., Andrade">
        <meta name="viewport" contetn="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="mySlider">
            <div id="s_Title"></div>
            <div id="s_Groove"></div>
            <div id="s_Lever"></div>
            <div id="s_SP"></div>
        </div>

        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

Потребовалось несколько настроек:

  • Определение maxPos
  • Логика сравнения должна была использовать число вместо строки
  • При подаче maxPos заявки также необходимо включить единицы измерения

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

1. Это действительно решает проблему! Большое вам спасибо.

2. Пожалуйста! Я рад, что это сработало для вас 🙂