Skip to content

Instantly share code, notes, and snippets.

@nanodeath

nanodeath/gist:48490

Created January 17, 2009 23:37
Show Gist options
  • Save nanodeath/48490 to your computer and use it in GitHub Desktop.
Save nanodeath/48490 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.htm
<html>
<head>
<!--
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://ui.jquery.com/bugs/export/1659/tags/1.6rc4/ui/jquery.ui.all.js" type="text/javascript"></script>
<!-- -->
<!-- -->
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
<script src="http://ui.jquery.com/bugs/export/1659/tags/1.6rc5/ui/jquery.ui.all.js" type="text/javascript"></script>
<!-- -->
<!--
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
<script src="http://ui.jquery.com/bugs/export/1660/trunk/ui/ui.core.js" type="text/javascript"></script>
<script src="http://ui.jquery.com/bugs/export/1660/trunk/ui/ui.draggable.js" type="text/javascript"></script>
<script src="http://ui.jquery.com/bugs/export/1660/trunk/ui/ui.droppable.js" type="text/javascript"></script>
<!-- -->
<style>
.theActiveClass {
border: 4px solid yellow;
}
.theHoverClass {
border: 4px solid green;
}
.theDraggable {
width: 40px;
height: 40px;
border: 4px solid black;
}
.theDroppable {
width: 80px;
height: 80px;
background-color: gray;
}
</style>
<script>
$(function(){
$(".theDraggable").draggable();
$(".theDroppable").droppable({
activeClass: 'theActiveClass',
hoverClass: 'theHoverClass'
});
});
</script>
</head>
<body>
<p><div class="theDraggable"></div></p>
<p><div class="theDroppable"></div></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment