Skip to content

Instantly share code, notes, and snippets.

@cflove
Created March 15, 2014 02:24
Show Gist options
  • Select an option

  • Save cflove/9560990 to your computer and use it in GitHub Desktop.

Select an option

Save cflove/9560990 to your computer and use it in GitHub Desktop.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.dragging {background-color: blue}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div style="width: 100px;height: 100px;border: 1px solid red;" class="cube" draggable="true">My Cude</div>
<br />
<div style="width: 200px;height: 200px;border: 1px solid red;" class="box" dropzone="true">My Box</div>
<div id="status"></div>
<script type="text/javascript">
$(document).ready(function(){
// $('.cube').on('dragstart',function(){
// $(this).addClass('dragging')
// $('#status').html("Dragging..")
// dragging = $(this)
// })
// $('.cube').on('dragend',function(){
// $('#status').html("dropped..")
// $(this).removeClass('dragging')
// })
// $('.box').on('dragenter',function(e){
// e.preventDefault()
// })
// $('.box').on('dragover',function(e){
// e.preventDefault()
// })
// $('.box').on('drop',function(e){
// $(dragging).appendTo(this)
// })
// =====================================================================
// $( ".cube" ).draggable({ revert: true })
// $(".box").droppable( {drop: function() { alert('dropped') }} )
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment