拖放JQuery之后在div标签之间创建一条线

Question

我在页面中间有一个div标签框，周围有很多div标签。我希望能够将任何外部div标签拖到中间的框中，然后div将返回到它的正常位置，但是要创建一条线来将div标签连接到中间的框。

  $(function() {
      $(".student").draggable({
        revert : function(event, ui) {
            $(this).data("uiDraggable").originalPosition = {
                top : 0,
                left : 0
            };
            return !event;
        }
    });
    $("#class").droppable();
});

我在这里jsfiddle

我设法让盒子拖到中间盒子或者只是回到正常位置。我是Jquery的新手，请你建议我下一步做什么？