Div móvel html e javascript

Olá pessoal, tudo bem? Hoje irei mostrar a como fazer uma div móvel de uma maneira fácil !
Prévia abaixo:

Clique, segure e mova :)


É a coisa mais fácil do mundo:

Basta você copiar o código html + javascript:
<!-- div móvel por belosonho --><br />
<div class="move">
<p>Textooo aqui</p>
</div><br />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  <script>
  $( function() {
    $( ".move" ).draggable();
  } );
  </script>
<!-- div móvel por belosonho -->
Pronto, agora vamos estilizar a divisória com CSS, abaixo do codigo que você colou, copie e cole este:
<style>
.move {z-index:100000; position:absolute; display:inline; padding: 0.5em; border:1px solid #000; cursor: -webkit-grabbing; background:#fff;}
</style>

Feito com: jQuery UI

0 comentários:

Postar um comentário

Obrigada por comentar, deixe seu blog no comentário para eu retribuir *-*