joystick · October 8, 2013 08:50
diff --git a/jsbin.AJiFazU.css b/jsbin.AJiFazU.css

 #container {
  margin: 20px;
 }

 #dnd {
  height: 100px;
  width: 100px;
  border: 2px solid red;
  background: white;
  padding: 10px;
 }

 #status {
  position: absolute;
  top: 400px;
  height: 40px;
  width: 80%;
  border: 2px solid grey;
 }
diff --git a/jsbin.AJiFazU.html b/jsbin.AJiFazU.html
 <!DOCTYPE html>
 <html>
 <head>
 <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
 <meta charset=utf-8 />
 <title>JS Bin</title>
 </head>
 <body>
  <div id="container">
    <div id="dnd">test</div>
    <div id="status">
      &nbsp;
    </div>
  </div>

 </body>
 </html>
diff --git a/jsbin.AJiFazU.js b/jsbin.AJiFazU.js
 $(function(document) {
  $("#dnd").draggable({
    stop: function() {
      var position =  $("#dnd").position();
      $("#status").text( "left: " + position.left + ", top: " + position.top );
    }
  });
 });
	<!DOCTYPE html>
	<html>
	<head>
	<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<div id="container">
	<div id="dnd">test</div>
	<div id="status">

	</div>
	</div>

	</body>
	</html>
	$(function(document) {
	$("#dnd").draggable({
	stop: function() {
	var position = $("#dnd").position();
	$("#status").text( "left: " + position.left + ", top: " + position.top );
	}
	});
	});