jQuery можно перетаскивать в пределах области, а также изменять ее размер

Question

У меня есть изображение Google, которое я хочу перетаскивать поверх определенной области, скажем, внутри диаграммы. Затем я хотел бы изменить размер изображения 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>

jQuery код, заключенный в Angular, указан ниже:

  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/