Question

我已经设置了一个使用Vue和Greensock可拖动的页面，以尝试使矩形svg对象在屏幕上可拖动。我想知道何时拖动对象，所以我设置了一个数据变量hasDragged：false。

在dragstart上使用addEventListener，我设置了一个函数，当它检测到已拖动该变量时会将其更新为true，但是它仅更新函数中的变量，而不更新我需要的数据变量。该功能在更新的生命周期挂钩中的另一个功能内，因此我想知道是否无法从第二个功能内更新this.hasDragged是一个问题。

我尝试了许多可拖动的addEventListener版本，尝试通过函数传递此变量，在每个函数中为其分配变量，将变量分配为常量和其他一些东西。

new Vue({
      el: "#app",
      data: {
        hasDragged: false
      },
updated: function(hasDragged) {
        var petDrag = Draggable.create(".icon",{
                bounds:"#container"
              })[0];
              petDrag.addEventListener("dragstart", dragStart);     
              function dragStart () {            
              this.hasDragged = true; 
        }

The expected result is that the hasDragged variable at the Vue data level will be updated to true when the svg object is dragged. The actual result is that only the variable within the second function is updated to true but the Vue data variable remains false.

Answer 1

函数内部的

this不是Vue实例。您可以为此使用箭头功能：

new Vue({
  el: "#app",
  data: {
    hasDragged: false
  },
  updated: function () {
    var petDrag = Draggable.create(".icon", {
      bounds: "#container"
    })[0];
    petDrag.addEventListener("dragstart", () => {
      this.hasDragged = true
    });
  }
})

Answer 2

我在这里参加聚会有点晚，但我只是想补充ittus的答案。

所有GSAP构造函数都有一组非常完整的事件回调，在其中的任何一个中，您都可以指定该特定回调内的作用域，这意味着您可以设置其中的this而不直接添加匿名对象功能（并不是说它有什么问题）。因此，在这种情况下，可以像这样将代码添加到Draggable构造函数中（我正在使用$refs来获取代码中的实际DOM元素）：

data: function () {
  return {
    blueDragged: false
  };
},
methods: {
  blueDragStarted: function () {
    this.blueDragged = true;
  },
},
mounted: function () {
  Draggable.create(this.$refs.blueElement, {
    type: "x, y",
    onDragStart: this.blueDragStarted,
    onDragStartScope: this // Vue component instance
  });
},

在此示例中，我们利用了创建Draggable实例的上下文。在这种情况下，this引用了组件实例，我们将其作为引用传递，以确保我们可以在回调中访问组件的状态。

再次，ittus的答案实际上没有错，只是感觉像是在GSAP在这方面提供的所有可能的补充。

您可以在此处查看GSAP Draggable的文档：

https://greensock.com/docs/Utilities/Draggable

向下滚动至标题为配置对象属性

的部分

Live demo

Vue函数未更新数据变量

2 个答案: