JQuery UI - Drag and Drop

Drag and Drop

Ponha-me dentro do quadrado preto

Coloque aqui o elemento arrastável

Maiores informações clique: Droppable (view source)

O Código está pronto para ser usado

	
<html>
<head>
<title>JQuery Core - Introdução a jQueryUI)</title>

<link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.10.4.
custom.css" />
/*Obs. O estilo nesse caso é lightness*/
<script type= "text/javascript" src= "/static/js/jquery.min.js"></script>
<script type= "text/javascript" src= "/static/js/jquery-ui.min.js"></script>
<script type= "text/javascript">

$(function() {
$( "#drag" ).draggable();
$( "#drop" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</head>

<body>
 No Html:
<div id="drag">
	<p>Ponha-me dentro do quadrado preto</p>
	</div>

<div id="drop">
	<p>Coloque aqui o elemento arrastável</p>
	</div>

 
 </body>
 </html>