Plugins jQuery apresentando jQuery User Interface (UI) Draggable

Voltando a série de tutoriais e apresentação de plugin jQuery, eu apresento o jQuery User Interface.


Com este ótimo plugin você consegue desenvolver interfaces muito atraentes para o seu usuário final utilizando o jQuery de uma forma incrivelmente fácil. Irei dividir a apresentação deste plugin em vários posts, cada um falando de uma parte específica.


Hoje falaremos da feature (podemos assim dizer) draggable, que te permite criar uma div ou qualquer um outro item que poderá ser arrastado para qualquer lugar do seu ambiente de trabalho, fazendo assim que sua aplicação web ganhe uma cara de desktop.


Arquivos necessários:
jQuery - http://jquery.com
Plugin jQUery UI - http://jqueryui.com/download


Quando você estiver na página de download do plugin você poderá escolher fazer o download completo ou apenas do draggable.


Nos precisaremos neste caso apenas do arquivo ui.core.js e ui.draggable.js que normalmente se encontram na pasta ui quando se é feito o download completo.


Coloque todos os arquivos na pasta raiz de seu html para ficar mais facil e utilize o seguinte codigo no seu header para localizar os arquivos em seu computador.


<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>

Crie agora uma div dentro do body do seu site com um id qualquer, que no nosso exemplo será #draggable.

<div id="draggable">
<p>texto a ser arrastado</p>
</div>

Para isso tudo ficar mais bonito e podermos fazer uma box em volta deste texto iremos utilizar um pouco de css.

<style type="text/css">
#draggable {
width: 90px;
height: 90px;
padding: 0.5em;
float: left;
margin: 0 10px 10px 0 }
#draggable{ margin-bottom:20px; }
p { clear:both; margin:0; padding:1em 0; }
</style>

Agora vamos a mágica que fará este bloco poder ser arrastado. Em seu header, logo depois de chamar o jquery e os plugins coloque o seguinte codigo javascript

<script type="text/javascript">
$(function() {
$("#draggable").draggable({ helper: 'original' });
});
</script>

Pronto, com isso você terá o seu box arrastável utilizando jQuery e o Plugin jQuery UI.

Qualquer dúvida eu estarei disposto a responder.

Obrigado.

5
Your rating: Nenhum Average: 5 (1 vote)

Comentários

Comentar

O conteúdo deste campo é privado não será exibido ao público.