jQuery可在区域内拖放和调整大小

Question

我有一张Google图片，希望可以将其拖放到某个区域的顶部，例如在图表div中。然后，我想调整Google图片的大小并拖动以适合图表大小。我如何在jQuery / css中实现。示例代码如下：

html代码如下：

<div id="draggableHelper" style="display: inline-block">
  <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
<div id="chartdiv" style="width: 100%; height: 500px">Chart</div>

用Angular包装的jQuery代码如下：

  ngOnInit() {
    $(function() {
      $('#draggableHelper').draggable().resizable({
        handles: "ne, se, sw, nw"
      });
    });

    $("#chartdiv").droppable({
      drop: function(event, ui) {

        var draggable = ui.draggable;
        var dragged = draggable.clone();
        dragged.appendTo("#chartdiv");
        dragged.resizable({containment: '#chartdiv'})
      }
    });

  }

问题是当我尝试调整图像大小时，图表本身会四处移动。双击该图像可重新调整google图像的大小。这样的示例：http://jsfiddle.net/u0r6zbt3/