Skip to main content
acentuação
Fonte Link
José Dız
  • 7mil
  • 2
  • 18
  • 30

Calcular distanciadistância horizontal de um elemento

A ideia era fazer algo ao estilo "slide to unlock"; contudo,estaestá a funcionar em uma resolução acima de 992px... creio que isto se deva ao break-point do Bootstrap e pelo fato de eu não estar sabendo pegar a refrênciareferência correta para calcular o margin-left a ser aplicado ao botão.

Acredito que haja uma forma melhor más não consegui chegar nela. Por causa do dito break-point adicionei ao trecho de código abaixo todos os contêineres que uso pois a remoção (de um ou de outro) quebra o calculocálculo.

NOTA: ao executar o código abaixo a resolução é menor que 992px e por isso o slide não ira funcionar... execute em "página toda" que ficaraficará acima de 992px e funcionara, aifuncionará; aí redimensione a janela para testar.

Calcular distancia horizontal de um elemento

A ideia era fazer algo ao estilo "slide to unlock" contudo só esta a funcionar em uma resolução acima de 992px... creio que isto se deva ao break-point do Bootstrap e pelo fato de eu não estar sabendo pegar a refrência correta para calcular o margin-left a ser aplicado ao botão.

Acredito que haja uma forma melhor más não consegui chegar nela. Por causa do dito break-point adicionei ao trecho de código abaixo todos os contêineres que uso pois a remoção (de um ou de outro) quebra o calculo.

NOTA: ao executar o código abaixo a resolução é menor que 992px e por isso o slide não ira funcionar... execute em "página toda" que ficara acima de 992px e funcionara, ai redimensione a janela para testar.

Calcular distância horizontal de um elemento

A ideia era fazer algo ao estilo "slide to unlock"; contudo,está a funcionar em uma resolução acima de 992px... creio que isto se deva ao break-point do Bootstrap e pelo fato de eu não estar sabendo pegar a referência correta para calcular o margin-left a ser aplicado ao botão.

Acredito que haja uma forma melhor más não consegui chegar nela. Por causa do dito break-point adicionei ao trecho de código abaixo todos os contêineres que uso pois a remoção (de um ou de outro) quebra o cálculo.

NOTA: ao executar o código abaixo a resolução é menor que 992px e por isso o slide não ira funcionar... execute em "página toda" que ficará acima de 992px e funcionará; aí redimensione a janela para testar.

correção de propriedade de eventos em código
Fonte Link
Lauro Moraes
  • 4mil
  • 4
  • 28
  • 47
var m = document.querySelector('button[type="submit"][data-slide-button="slide"]');
m.addEventListener('click', clickHandler, false)
m.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);




function mouseUp() {
    window.removeEventListener('mousemove', move, true);
}

function mouseDown(e) {
    window.addEventListener('mousemove', move, true);
}



function clickHandler(e) {
    e.preventDefault();


    let buttonWidth = e.toElementtarget.offsetWidth // 41
    let buttonMarginLeft = e.target.offsetLeft

    let containerWidth = e.srcElementtarget.parentNode.clientWidth

    if ( buttonMarginLeft < (containerWidth - buttonWidth) ) {
        m.style.left = 0
        m.style.borderLeft = 0
        m.style.borderRight = '1px solid #ced4da'
    }

    console.log('end of click')



}



function move(e) {
    //console.log(e)
    /**

      let pw = parent ("submit-form-button") width
      let bw = button width (this)

     */

    let buttonWidth = e.toElementtarget.offsetWidth // 41
    let buttonMarginLeft = e.target.offsetLeft

    let containerWidth = e.srcElementtarget.parentNode.clientWidth



    if ( buttonMarginLeft > (containerWidth - buttonWidth) ) {
        // fix left
        m.style.left = (containerWidth - buttonWidth) +1 + 'px'
        m.style.borderLeft = '1px solid #ced4da'
        m.style.borderRight = 0
        // remove handler
        window.removeEventListener('mousemove', move, true)
        window.removeEventListener('click', clickHandler, true)
        e.srcElementtarget.parentNode.setAttribute('data-content', 'sending form')
        console.log('ok truta')
    } else {
        if ( buttonMarginLeft < 0 ) {
            m.style.left = 0
            m.style.borderLeft = 0
            m.style.borderRight = '1px solid #ced4da'
            window.removeEventListener('mousemove', move, true)

            console.log('negative')
        } else {
            let calculate = e.x - (containerWidth + buttonWidth )

            if ( calculate < 0 ) {
                console.log('adjust is negative')
                m.style.left = 0
            } else {
                console.log('adjust')
                m.style.left =  calculate + 'px'
            }

        }

    }

};
.submit-slide-button {
  width: 100%;
  transition: opacity 0.5s;
  border: 1px solid #ced4da;
  margin: 0 auto;
  background-color: #28a745;
  color: white;
}
.submit-slide-button:before {
  content: attr(data-content) !important;
  color: white;/*#8a8a8a;*/
  position: absolute;
  left: 35%;
  top: .5rem;
  z-index: 1;
  font-size: 1rem;
}
.submit-slide-button button {
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  background-color: #e9ecef;
  position: relative;
  cursor: pointer;
  z-index: 1;
  border-right: 1px solid #ced4da;
  color: #495057;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>


<section class="container-fluid px-0 pt-5">

    <div class="col mx-auto mt-4 ct">

        <div class="col mx-0 text-left">

            <div class="col col-sm-8 col-md-5 col-lg-4 mx-auto px-0 mb-5">        

                <form id="signin-form" action="#" method="post" accept-charset="utf-8" validate="true">        

                    <div class="form-group mb-2">
                        <label class="mb-1">Email</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text rounded-0 fa fa-at"></span>
                            </div>
                            <input id="user-email" type="email" autocomplete="user-email" placeholder="Email" class="form-control rounded-0" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required focus>
                        </div>
                    </div>
                    <div class="form-group mb-2">
                        <label class="mb-1">Password</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text rounded-0 fa fa-lock"></span>
                            </div>
                            <input id="user-password" type="password" autocomplete="current-password" placeholder="Password" class="form-control rounded-0" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,50}" required>
                        </div>
                    </div>
                    <div class="checkbox pt-1">
                        <label>
                            <input id="remember" type="checkbox" name="remember"> Remember-me
                        </label>
                    </div>
                    <div class="form-group mb-2">
                        <div class="input-group">
                            <div class="submit-slide-button" data-content="slide to submit">
                                <button data-slide-button="slide" type="submit" class="fa fa-arrow-circle-right"></button>
                            </div>
                        </div>
                    </div>
                    <a href="./recover" class="float-left mt-4">Recover?</a>        

                </form>        

            </div>

        </div>
        
    </div> 

</section>


<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
var m = document.querySelector('button[type="submit"][data-slide-button="slide"]');
m.addEventListener('click', clickHandler, false)
m.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);




function mouseUp() {
    window.removeEventListener('mousemove', move, true);
}

function mouseDown(e) {
    window.addEventListener('mousemove', move, true);
}



function clickHandler(e) {
    e.preventDefault();


    let buttonWidth = e.toElement.offsetWidth // 41
    let buttonMarginLeft = e.target.offsetLeft

    let containerWidth = e.srcElement.parentNode.clientWidth

    if ( buttonMarginLeft < (containerWidth - buttonWidth) ) {
        m.style.left = 0
        m.style.borderLeft = 0
        m.style.borderRight = '1px solid #ced4da'
    }

    console.log('end of click')



}



function move(e) {
    //console.log(e)
    /**

      let pw = parent ("submit-form-button") width
      let bw = button width (this)

     */

    let buttonWidth = e.toElement.offsetWidth // 41
    let buttonMarginLeft = e.target.offsetLeft

    let containerWidth = e.srcElement.parentNode.clientWidth



    if ( buttonMarginLeft > (containerWidth - buttonWidth) ) {
        // fix left
        m.style.left = (containerWidth - buttonWidth) +1 + 'px'
        m.style.borderLeft = '1px solid #ced4da'
        m.style.borderRight = 0
        // remove handler
        window.removeEventListener('mousemove', move, true)
        window.removeEventListener('click', clickHandler, true)
        e.srcElement.parentNode.setAttribute('data-content', 'sending form')
        console.log('ok truta')
    } else {
        if ( buttonMarginLeft < 0 ) {
            m.style.left = 0
            m.style.borderLeft = 0
            m.style.borderRight = '1px solid #ced4da'
            window.removeEventListener('mousemove', move, true)

            console.log('negative')
        } else {
            let calculate = e.x - (containerWidth + buttonWidth )

            if ( calculate < 0 ) {
                console.log('adjust is negative')
                m.style.left = 0
            } else {
                console.log('adjust')
                m.style.left =  calculate + 'px'
            }

        }

    }

};
.submit-slide-button {
  width: 100%;
  transition: opacity 0.5s;
  border: 1px solid #ced4da;
  margin: 0 auto;
  background-color: #28a745;
  color: white;
}
.submit-slide-button:before {
  content: attr(data-content) !important;
  color: white;/*#8a8a8a;*/
  position: absolute;
  left: 35%;
  top: .5rem;
  z-index: 1;
  font-size: 1rem;
}
.submit-slide-button button {
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  background-color: #e9ecef;
  position: relative;
  cursor: pointer;
  z-index: 1;
  border-right: 1px solid #ced4da;
  color: #495057;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>


<section class="container-fluid px-0 pt-5">

    <div class="col mx-auto mt-4 ct">

        <div class="col mx-0 text-left">

            <div class="col col-sm-8 col-md-5 col-lg-4 mx-auto px-0 mb-5">        

                <form id="signin-form" action="#" method="post" accept-charset="utf-8" validate="true">        

                    <div class="form-group mb-2">
                        <label class="mb-1">Email</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text rounded-0 fa fa-at"></span>
                            </div>
                            <input id="user-email" type="email" autocomplete="user-email" placeholder="Email" class="form-control rounded-0" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required focus>
                        </div>
                    </div>
                    <div class="form-group mb-2">
                        <label class="mb-1">Password</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text rounded-0 fa fa-lock"></span>
                            </div>
                            <input id="user-password" type="password" autocomplete="current-password" placeholder="Password" class="form-control rounded-0" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,50}" required>
                        </div>
                    </div>
                    <div class="checkbox pt-1">
                        <label>
                            <input id="remember" type="checkbox" name="remember"> Remember-me
                        </label>
                    </div>
                    <div class="form-group mb-2">
                        <div class="input-group">
                            <div class="submit-slide-button" data-content="slide to submit">
                                <button data-slide-button="slide" type="submit" class="fa fa-arrow-circle-right"></button>
                            </div>
                        </div>
                    </div>
                    <a href="./recover" class="float-left mt-4">Recover?</a>        

                </form>        

            </div>

        </div>
        
    </div> 

</section>


<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
var m = document.querySelector('button[type="submit"][data-slide-button="slide"]');
m.addEventListener('click', clickHandler, false)
m.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);




function mouseUp() {
    window.removeEventListener('mousemove', move, true);
}

function mouseDown(e) {
    window.addEventListener('mousemove', move, true);
}



function clickHandler(e) {
    e.preventDefault();


    let buttonWidth = e.target.offsetWidth // 41
    let buttonMarginLeft = e.target.offsetLeft

    let containerWidth = e.target.parentNode.clientWidth

    if ( buttonMarginLeft < (containerWidth - buttonWidth) ) {
        m.style.left = 0
        m.style.borderLeft = 0
        m.style.borderRight = '1px solid #ced4da'
    }

    console.log('end of click')



}



function move(e) {

    let buttonWidth = e.target.offsetWidth // 41
    let buttonMarginLeft = e.target.offsetLeft

    let containerWidth = e.target.parentNode.clientWidth



    if ( buttonMarginLeft > (containerWidth - buttonWidth) ) {
        // fix left
        m.style.left = (containerWidth - buttonWidth) +1 + 'px'
        m.style.borderLeft = '1px solid #ced4da'
        m.style.borderRight = 0
        // remove handler
        window.removeEventListener('mousemove', move, true)
        window.removeEventListener('click', clickHandler, true)
        e.target.parentNode.setAttribute('data-content', 'sending form')
        console.log('ok truta')
    } else {
        if ( buttonMarginLeft < 0 ) {
            m.style.left = 0
            m.style.borderLeft = 0
            m.style.borderRight = '1px solid #ced4da'
            window.removeEventListener('mousemove', move, true)

            console.log('negative')
        } else {
            let calculate = e.x - (containerWidth + buttonWidth )

            if ( calculate < 0 ) {
                console.log('adjust is negative')
                m.style.left = 0
            } else {
                console.log('adjust')
                m.style.left =  calculate + 'px'
            }

        }

    }

};
.submit-slide-button {
  width: 100%;
  transition: opacity 0.5s;
  border: 1px solid #ced4da;
  margin: 0 auto;
  background-color: #28a745;
  color: white;
}
.submit-slide-button:before {
  content: attr(data-content) !important;
  color: white;/*#8a8a8a;*/
  position: absolute;
  left: 35%;
  top: .5rem;
  z-index: 1;
  font-size: 1rem;
}
.submit-slide-button button {
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  background-color: #e9ecef;
  position: relative;
  cursor: pointer;
  z-index: 1;
  border-right: 1px solid #ced4da;
  color: #495057;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>


<section class="container-fluid px-0 pt-5">

    <div class="col mx-auto mt-4 ct">

        <div class="col mx-0 text-left">

            <div class="col col-sm-8 col-md-5 col-lg-4 mx-auto px-0 mb-5">        

                <form id="signin-form" action="#" method="post" accept-charset="utf-8" validate="true">        

                    <div class="form-group mb-2">
                        <label class="mb-1">Email</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text rounded-0 fa fa-at"></span>
                            </div>
                            <input id="user-email" type="email" autocomplete="user-email" placeholder="Email" class="form-control rounded-0" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required focus>
                        </div>
                    </div>
                    <div class="form-group mb-2">
                        <label class="mb-1">Password</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text rounded-0 fa fa-lock"></span>
                            </div>
                            <input id="user-password" type="password" autocomplete="current-password" placeholder="Password" class="form-control rounded-0" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,50}" required>
                        </div>
                    </div>
                    <div class="checkbox pt-1">
                        <label>
                            <input id="remember" type="checkbox" name="remember"> Remember-me
                        </label>
                    </div>
                    <div class="form-group mb-2">
                        <div class="input-group">
                            <div class="submit-slide-button" data-content="slide to submit">
                                <button data-slide-button="slide" type="submit" class="fa fa-arrow-circle-right"></button>
                            </div>
                        </div>
                    </div>
                    <a href="./recover" class="float-left mt-4">Recover?</a>        

                </form>        

            </div>

        </div>
        
    </div> 

</section>


<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
Fonte Link
Lauro Moraes
  • 4mil
  • 4
  • 28
  • 47

Calcular distancia horizontal de um elemento

Estou tentando customizar um botão de submit usando Bootstrap 4 Beta 3.

A ideia era fazer algo ao estilo "slide to unlock" contudo só esta a funcionar em uma resolução acima de 992px... creio que isto se deva ao break-point do Bootstrap e pelo fato de eu não estar sabendo pegar a refrência correta para calcular o margin-left a ser aplicado ao botão.

Estou pegando a referência x do evento mousemove más como "acredito" que esta medida seja do elemento em razão da tela o break-point do Bootstrap quebra minha lógica.

Acredito que haja uma forma melhor más não consegui chegar nela. Por causa do dito break-point adicionei ao trecho de código abaixo todos os contêineres que uso pois a remoção (de um ou de outro) quebra o calculo.

NOTA: ao executar o código abaixo a resolução é menor que 992px e por isso o slide não ira funcionar... execute em "página toda" que ficara acima de 992px e funcionara, ai redimensione a janela para testar.

Ou o mesmo código em uma página github.

var m = document.querySelector('button[type="submit"][data-slide-button="slide"]');
m.addEventListener('click', clickHandler, false)
m.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);




function mouseUp() {
    window.removeEventListener('mousemove', move, true);
}

function mouseDown(e) {
    window.addEventListener('mousemove', move, true);
}



function clickHandler(e) {
    e.preventDefault();


    let buttonWidth = e.toElement.offsetWidth // 41
    let buttonMarginLeft = e.target.offsetLeft

    let containerWidth = e.srcElement.parentNode.clientWidth

    if ( buttonMarginLeft < (containerWidth - buttonWidth) ) {
        m.style.left = 0
        m.style.borderLeft = 0
        m.style.borderRight = '1px solid #ced4da'
    }

    console.log('end of click')



}



function move(e) {
    //console.log(e)
    /**

      let pw = parent ("submit-form-button") width
      let bw = button width (this)

     */

    let buttonWidth = e.toElement.offsetWidth // 41
    let buttonMarginLeft = e.target.offsetLeft

    let containerWidth = e.srcElement.parentNode.clientWidth



    if ( buttonMarginLeft > (containerWidth - buttonWidth) ) {
        // fix left
        m.style.left = (containerWidth - buttonWidth) +1 + 'px'
        m.style.borderLeft = '1px solid #ced4da'
        m.style.borderRight = 0
        // remove handler
        window.removeEventListener('mousemove', move, true)
        window.removeEventListener('click', clickHandler, true)
        e.srcElement.parentNode.setAttribute('data-content', 'sending form')
        console.log('ok truta')
    } else {
        if ( buttonMarginLeft < 0 ) {
            m.style.left = 0
            m.style.borderLeft = 0
            m.style.borderRight = '1px solid #ced4da'
            window.removeEventListener('mousemove', move, true)

            console.log('negative')
        } else {
            let calculate = e.x - (containerWidth + buttonWidth )

            if ( calculate < 0 ) {
                console.log('adjust is negative')
                m.style.left = 0
            } else {
                console.log('adjust')
                m.style.left =  calculate + 'px'
            }

        }

    }

};
.submit-slide-button {
  width: 100%;
  transition: opacity 0.5s;
  border: 1px solid #ced4da;
  margin: 0 auto;
  background-color: #28a745;
  color: white;
}
.submit-slide-button:before {
  content: attr(data-content) !important;
  color: white;/*#8a8a8a;*/
  position: absolute;
  left: 35%;
  top: .5rem;
  z-index: 1;
  font-size: 1rem;
}
.submit-slide-button button {
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  background-color: #e9ecef;
  position: relative;
  cursor: pointer;
  z-index: 1;
  border-right: 1px solid #ced4da;
  color: #495057;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>


<section class="container-fluid px-0 pt-5">

    <div class="col mx-auto mt-4 ct">

        <div class="col mx-0 text-left">

            <div class="col col-sm-8 col-md-5 col-lg-4 mx-auto px-0 mb-5">        

                <form id="signin-form" action="#" method="post" accept-charset="utf-8" validate="true">        

                    <div class="form-group mb-2">
                        <label class="mb-1">Email</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text rounded-0 fa fa-at"></span>
                            </div>
                            <input id="user-email" type="email" autocomplete="user-email" placeholder="Email" class="form-control rounded-0" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required focus>
                        </div>
                    </div>
                    <div class="form-group mb-2">
                        <label class="mb-1">Password</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text rounded-0 fa fa-lock"></span>
                            </div>
                            <input id="user-password" type="password" autocomplete="current-password" placeholder="Password" class="form-control rounded-0" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,50}" required>
                        </div>
                    </div>
                    <div class="checkbox pt-1">
                        <label>
                            <input id="remember" type="checkbox" name="remember"> Remember-me
                        </label>
                    </div>
                    <div class="form-group mb-2">
                        <div class="input-group">
                            <div class="submit-slide-button" data-content="slide to submit">
                                <button data-slide-button="slide" type="submit" class="fa fa-arrow-circle-right"></button>
                            </div>
                        </div>
                    </div>
                    <a href="./recover" class="float-left mt-4">Recover?</a>        

                </form>        

            </div>

        </div>
        
    </div> 

</section>


<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>

PS: não estou procurando soluções com jQuery UI (draggable), procuro algo em Vanilla ou jQuery somente