Skip to content

Instantly share code, notes, and snippets.

@nitsujw

nitsujw/gist:510303

Created August 5, 2010 20:11
Show Gist options
  • Save nitsujw/510303 to your computer and use it in GitHub Desktop.
Save nitsujw/510303 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="draggable" style="width: 50px; float: left; height: 50px; background: red;">1</div>
<div class="draggable" style="width: 50px; float: left; height: 50px; border: 1px solid red;">2</div>
<div class="draggable" style="width: 50px; float: left; height: 50px; border: 1px solid red;">3</div>
<div class="draggable" style="width: 50px; float: left; height: 50px; border: 1px solid red;">4</div>
<div class="draggable" style="width: 50px; float: left; height: 50px; border: 1px solid red;">5</div>
<div style="clear: left;height: 50px;"></div>
<div id="1" class="droppable" style="width: 180px; float: left; height: 80px; border: 1px solid red;"></div>
<div id="2" class="droppable" style="width: 180px; float: left; height: 80px; border: 1px solid red;"></div>
<div id="3" class="droppable" style="width: 180px; float: left; height: 80px; border: 1px solid red;"></div>
<div id="4" class="droppable" style="width: 180px; float: left; height: 80px; border: 1px solid red;"></div>
<div id="5" class="droppable" style="width: 180px; float: left; height: 80px; border: 1px solid red;"></div>
<div style="clear: left;height: 50px;"></div>
<input type="text" id="drop-1" class="droppable" />
<input type="text" id="drop-2" class="droppable" />
<input type="text" id="drop-3" class="droppable" />
<input type="text" id="drop-4" class="droppable" />
<input type="text" id="drop-5" class="droppable" />
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
$(".draggable").draggable();
$(".droppable").droppable({
drop: function(e){
var self = $(this);
var input = $("#drop-"+self.attr('id')+"");
var dragger = $(e.originalTarget);
input.attr('value', dragger.html());
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment