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" />
<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() {
$( "#catalogo li" ).draggable({
helper:"clone"
});
$( "#carrinho ul" ).droppable({
drop:function( event, ui ) {
$(this).append($("<li/>"). text(ui.draggable.text()));
$(this).find(".mensagem").remove();
}
});
});
</script>
</head>
<body>
No Html:
<h3>Carrinho de Compras</h3>
<div id="catalogo">
<h2>Catálogo</h2>
<ul>
<li>Livro</li>
<li>Cd</li>
<li>Celular</li>
<li>Relógio</li>
<li>Carteira</li>
</ul>
</div>
<div id="carrinho">
<h2>Carrinho</h2>
<ul>
<li class="mensagem">compras...</li>
</ul>
</div>
</body>
</html>
Observe o código:
clique em (view source)