<!DOCTYPE html>
<html>
<head>
<title>Drag Item Task</title>
<!-- stylesheets -->
<link rel="stylesheet" type="text/css" href="../core/core.css">
<!-- JS -->
<script src="../core/core.js"></script>
<script src="../core/d3.v3.min.js"></script>
<script src="../common/shapes.js"></script>
<style>
#area svg { height: 130px; width: 160px; }
#area svg circle:hover { cursor: pointer; }
#subbtn { margin-left: 30px; }
</style>

<script>
var DIRECTIONS = ['left', 'right', 'up', 'down'];

var createCircle = function(sv