1

Pessoal preciso fazer um botão móvel (clicar e arrastar em qualquer lugar da tela), não estou entendo porque isto não esta funcionando... Alguém sabe?

.corpo{
    background-color: #555555;
}

#button {
    position: absolute;
    height: 40px;
    width: 80px;
    border: 4px solid #B20000;
    background-color: #FF0000;
    color: #FFFFFF;
    box-shadow: 5px 5px 5px #888;
    text-align: center;
    border-radius: 6px;
    font-weight: bold;
    line-height: 35px;    
    margin: 0 auto;
}

#button a {
    text-decoration: none;
    color: #FFFFFF;
    font-size: 135%;
    position: relative;
}

#center {
    position: relative;
    max-width: 600px;
}
<html>
    <meta charset="UTF-8"> <!-- add special characters -->
    <head>
        <title>Página</title> <!-- Add page title -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- add Jquery CDN -->
        <link href src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen"></script> <!-- add bootstrap css CDN -->    
    </head>

    <body class="corpo">
        <h1><center>Página Monstra</center></h1>
            <hr/>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- add Bootstrap CDN -->

        <link href="design.css" rel="stylesheet" media="screen"> <!-- Add css in html -->

        <script type="text/javascript"> // all javascript/jquery code start her
            function add_field() 
            {
                // ------------------------------------------------------
                var form = document.getElementsByTagName('form')[0],
                input = document.createElement('textarea');
                input.setAttribute('type', 'textarea');
                input.setAttribute('name', 'item');
                form.appendChild(input);

                input = document.createElement('button');
                input.setAttribute('type', 'button');
                input.setAttribute('name', 'item');
                input.setAttribute('class', 'btnaumentar');
                form.appendChild(input);
            };
                
            var count = 0;
                
            function contador() 
            {
                count++;
                console.log(count); // show count in console

                if(count >= 10){
                    alert("VOCÊ NÃO PODE ADICIONAR MAIS CAIXAS"); // alert dialog
                    $( ".button" ).prop( "disabled", true ); // disable button
                }
            };

            function mover(){
                $(document).ready(function() {
                $('#button').draggable();
            });     
        </script>

        <div id="center">
          <div id="button">
              <a href='#button'>Easy</a>
          </div>
        </div>

        <form name="input" method="get">
            <div class="ui-input-text">      
                <div data-role="navbar">
                      <button type="button" class="button" onclick="add_field(); contador();">ADICIONAR CAIXAS DE TEXTO</button><br><br>
                </div>
            </div>
        </form>

        <!-- SALVAR -->
        <form name="input" method="get">
            <div class="ui-input-text">      
                <div data-role="navbar">
                      <button type="button" class="btnsave">SALVAR</button><br><br>
                </div>
            </div>
        </form>
    </body>
</html>

1 Resposta 1

1

Com a biblioteca jQuery UI você pode por qualquer elemento como draggable, fica melhor por numa div porque assim você não precisa prevenir a ação padrão do botão.

$(".move").draggable();
.move {
  display: inline-block; /* Não gerar rolagem para a direita */
  cursor: move; /* Indicar que o elemento pode ser movido */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
<div class="move">
	::::::::::<br>
	<button>Click</button>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .