Palavra:   

Revista PHP / Java Script

Osdeni Sadzinski

Programador Pleno PHP, trabalha atualmente na UNESC (www.unesc.net) como Programador Web. tem conhecimentos em: PHP, AJAX, JavaScript, JSON, XHTML, CSS e MySql. Estudando: Java e Ruby on Rails.

Movendo Elementos HTML com mouse (crossbrowser).

Movendo Elementos HTML com mouse (crossbrowser).

Nesse artigo irei mostar como mover elementos html com o mouse.

1º Vamos fazer o download da versão 1.2.1;
2º Vamos fazer o download dos plugin jQuery UI;

Colocando a mão na massa!

Obs*: A explicação do código está inserida no mesmo em forma de comentários.

3º Criar um arquivo HTML (mover.html):
  1. <html>
  2. <head>
  3. 	<title>Movendo elementods HTML</title>
  4. 	<!-- JavaScripts necessários para você poder mover os elementos HTML -->
  5. 	<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
  6.  
  7. 	<!-- utilizamos somente os arquivo necessários do plugin UI para mover elementos -->
  8. 	<script type="text/javascript" src="jquery.ui-1.0/ui.mouse.js"></script>
  9. 	<script type="text/javascript" src="jquery.ui-1.0/ui.draggable.js"></script>
  10. 	<script type="text/javascript" src="jquery.ui-1.0/ui.draggable.ext.js"></script>
  11. 	<script type="text/javascript" src="jquery.ui-1.0/ui.droppable.js"></script>
  12. 	<script type="text/javascript" src="jquery.ui-1.0/ui.droppable.ext.js"></script>
  13.  
  14. 	<script type="text/javascript">
  15.  
  16. 		/* Tudo que estiver dentro  desse bloco de código será executado após o carregamento da página*/
  17. 		$(function() {
  18.  
  19. 			/* O elemento com class .block (poder sem vários) poderá ser movido enquanto movimenta, ele levara junto um clone dele */
  20. 			$(".block").draggable({helper: 'clone'});
  21.  
  22. 			/* o elemento com class drop está apto a receber um elemento */
  23. 			$(".drop").droppable({
  24.  
  25. 				/* definimos que ele receberá o elemento de class .block, apenas .block */
  26. 				accept: ".block",
  27.  
  28. 				/* quando movermos o .block, colocamos um novo estilo no elemento drop (opcional) */
  29. 				activeClass: 'droppable-active',
  30.  
  31. 				/* quando passamos o .block sobre o class .drop, podemos mudá-lo de estilo */
  32. 				hoverClass: 'droppable-hover',
  33.  
  34. 				/* tolerância para aceitar o elemento, nesse caso é quando o cursos tocar no elemento */
  35. 				tolerance: 'pointer',
  36.  
  37. 				/* quando soltamos o elemento .block sobre o elemento .drop, executamos algun javascript*/ 
  38. 				drop: function(ev, ui) {
  39. 					/* para usufruir dos atributos do objeto que esta sendo movido utilize o exemplo a baixo como base*/
  40. 					// --> $(ui.draggable.element).text();
  41.  
  42. 					/* variável this aponta para o elemento que recebe o objeto */
  43. 					$(this).append("<p>Dropped!</p>");
  44. 				}
  45. 			});
  46. 		});
  47.  
  48. 	</script>
  49.  
  50. 	<!-- Estilo qualquer -->
  51. 	<style type="text/css">
  52. 		.block {
  53. 			width: 100px;
  54. 			height: 100px;
  55. 			background: #990000;
  56. 			color: #FFFFFF;
  57. 			cursor: move;
  58. 		}
  59.  
  60. 		.drop {
  61. 			width: 350px;
  62. 			background: #000099;
  63. 			color: #FFFFFF;
  64. 		}
  65. 		.drop p {
  66. 			padding: 10px;
  67. 		}
  68.  
  69. 		.droppable-active { background: green; }
  70. 		.droppable-hover { background: yellow; color: #000000; }
  71. 	</style>
  72. </head>
  73. <body>
  74. 	<!-- Elemento a ser movido, repare no class dele -->
  75. 	<div class="block">Elemento a ser movido</div>
  76.  
  77. 	<!-- Elemento re receberá o elemento que esta sendo movido, adicionaremos outro <p>
  78.  dentro desse elemento -->
  79. 	<div class="drop">
  80. 		<p>Esse elemento irá receber o ítem que será movido</p>
  81. 	</div>
  82. </body>
  83. </html>
4º Agora é utilizar sua criatividade para incrementar suas aplicações utilizando o recurso apresentado.

Opções de Interação

  •