Heres the html I'm using.
<!doctype html>
<html lang="en">
<head>
<title>drag & drop</title>
<link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui/ui.core.js"></script>
<script type="text/javascript" src="ui/ui.draggable.js"></script>
<script type="text/javascript" src="ui/ui.droppable.js"></script>
<script type="text/javascript" src="script.js"></script>
<link type="text/css" href="css/demos.css" rel="stylesheet" />
<style type="text/css">
#droppable { background: black; width: 150px; height: 150px; padding: 0.5em;
float: left; margin: 10px; }
</style>
<script type="text/javascript">
$(document).ready( initialise);
</script>
</head>
<body>
<div id="droppable"></div>
</body>
</html>
// js
var these = [ 'white', 'black', 'orange, 'etc' ];
function makeButtons() {
for (i in these)
makeWord(these[i]);
}
function makeWord(s) {
var e = $(document.createElement('div'));
e.attr('id', s);
e.append(s);
e.draggable( );
$('body').append(e);
}
function initialise(){
makeButtons();
$(function(){
$("#droppable").droppable({
drop: function( ) { alert('dropped'); }
});
});
}
