draggable asteroids with events

experimenting to live hooking up of events etc. and broadcasting

HTML

<div class="space">
  <div class="tetromino">
    <div class="square" id="a1" style="left: 10px; top: 10px;">
    <p>
    <a href="https://gisellej.com" target="_blank">GiselleJ</a>
    </p>
    </div>
    <div class="square" id="a2" style="left: 10px; top: 90px;">
    </div>
      <div class="square" id="a2" style="left: 10px; top: 170px;">
    </div>

  </div>
  
  
    <div class="square" id="a3" style="left: 150px; top: 150px;">
    </div>
</div>

CSS

.space {position: absolute; width:800px; height:500px; background:grey;}
.square {position: absolute; width:70px; height:70px; background:green;text-align:center;}
.tetromino {position: absolute; width:70px; height:70px; background:none;text-align:center;}
#a1,#a2 { background:lightgreen;line-height:70px;}
#a3 { background:blue;}
a{  font-family: Arial;
  color: #222;
  font-size: 14px;
    text-decoration: none;}

/*
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; background:red;}
*/

.ui-icon { width: 16px; height: 16px; background-image: url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/images/ui-icons_222222_256x240.png); }
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }

JavaScript

//$('.square')
//    .draggable()


$('.tetromino')
    .draggable()