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>