了解ES6模块和功能中的范围

Question

我正在尝试设置一个ES6环境，其中一些库是通过nmp安装的。 这一切都很有魅力，现在我尝试使用npm包draggable制作一个可拖动的仪表板。

安装程序看起来像这样：

<div id="container" data-module="Grid">
 <div class="ball green"></div>
 <div class="ball red"></div>
</div>

sadasd

import $ from 'jquery';
import Draggable from 'draggable';
import { forEach, find, filter, reduce } from 'lodash';

export default class Grid
{
  constructor($select) {

    this.grid = {
        options: [],
    };

    this.$container = document.getElementById('container');
    this.$element1 = document.getElementsByClassName('ball')[0];
    this.$element2 = document.getElementsByClassName('ball')[1];

    console.log(this.$element1);
    console.log(this.$element2);

    var options = {
        limit: this.$container,
        grid: 200,
        setCursor: true,
        onDragEnd: this.update
    };

    this.drag  = new Draggable(this.$element1, options);
    this.drag2 = new Draggable(this.$element2, options);

    this.upGrid(0, 0);
  }

  update(elem, x, y) {
    console.log($(elem));
    console.log(x+'/'+y);
    this.upGrid(x, y);
  }

  upGrid(x, y) {
    console.log(this.drag.get());
    this.grid.options.push(x+'/'+y);
    console.log(this.grid.options);
  }
}

问题： 函数更新定义为在拖动事件结束时由可拖动元素调用。这有效，但该函数无法访问构造函数中创建的网格变量。它也不知道函数upGrid（）。我想这是因为它以某种方式存在于draggable-package中。

有人可以帮我理解为什么以及如何管理这些功能的范围？

提前致谢