javascript - 如何在附加元素后触发指令事件？

Question

如何在添加元素后立即触发事件 mousedown ？

我希望新添加的元素在添加后直接拖动(并且避免必须再次单击它来拖动它)。

因此，在 append(element) 元素之后，我 trigger('mousedown')，这是我的指令中的有效事件，但未调用它。是否存在时间问题？

我尝试将 trigger 事件封装在 setTimeout 中(就像 AngularJS 中推荐的那样)，但它不起作用。

这是一个JSFiddle

注意:SO 片段中有错误，我不知道为什么。我建议您使用 JSFiddle。

Vue.directive('draggable-copy', {
  bind: function() {
    var el = this.el;

    el.addEventListener("mousedown", function(e) {
      e.preventDefault();

      var clone = $(el).clone();
      var posX = e.pageX - (100 / 2) - $(el).parent('svg').position().left;
      var posY = e.pageY - (50 / 2) - $(el).parent('svg').position().top;
      clone.attr('transform', 'translate(' + posX + ',' + posY + ')');
      clone.attr('v-drag', '');
      var compiledElement = vm.$compile(clone[0]);

      console.log(clone[0])

      $('#palet').append(clone[0]);
      setTimeout(function() {
      	// THIS DOESN'T GET TRIGGERED
        clone.trigger('mousedown');
      });
    });
  }
});

Vue.directive('drag', {
  bind: function() {
    var el = this.el;
    var startX = 0,
      startY = 0;
    var x, y;

    el.addEventListener("mousedown", function(e) {
      console.log('mousedown')
      startX = 100 / 2;
      startY = 50 / 2;

      $(document).on("mousemove", mousemove);
      $(document).on("mouseup", mouseup);
    });

    function mousemove(e) {
      x = e.pageX - startX - $(el).parent('svg').position().left;
      y = e.pageY - startY - $(el).parent('svg').position().top;

      $(el).attr('transform', 'translate(' + x + ',' + y + ')');
    }

    function mouseup() {
      $(document).off("mousemove", mousemove);
      $(document).off("mouseup", mouseup);
      $(el).remove();
    }
  }
});

var vm = new Vue({
  el: '#container'
});

svg {
  border: 1px solid black;
}

.node:hover {
  cursor: pointer;
}
.node:hover .split {
  fill: #F7ED5D;
}
.node .split {
  fill: #FDFFAB;
  stroke: #F7ED5D;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <svg id="palet" height="250" width="250">
    <g class="node" transform="translate(0, 75)" v-draggable-copy>
      <polygon points="50,0 100,25 50,50 0,25" class="split" />
      <text x="35" y="30">Split</text>
    </g>
  </svg>
</div>

Answer 1

这是我使用的解决方案:

• 我复制了该组 <g> .
• 将上面的内容设为可拖动 v-drag .
• 最后当拖动的元素释放时mouseup ，我将其重新定位到初始位置。

JSFiddle

Vue.directive('drag', {
  bind: function() {
    var el = this.el;
    var initialX, initialY;
    var startX, startY;
    var x, y;

    el.addEventListener("mousedown", function(e) {
    	e.preventDefault();
      console.log('mousedown')
      var transformPosition = $(el).attr("transform").match(/\d+/g);
			
    	initialX = transformPosition[0];
      initialY = transformPosition[1];
      startX = 100 / 2;
      startY = 50 / 2;

      $(document).on("mousemove", mousemove);
      $(document).on("mouseup", mouseup);
    });

    function mousemove(e) {
    	e.preventDefault();
      x = e.pageX - startX - $(el).parent('svg').position().left;
      y = e.pageY - startY - $(el).parent('svg').position().top;

      $(el).attr('transform', 'translate(' + x + ',' + y + ')');
    }

    function mouseup() {
      $(document).off("mousemove", mousemove);
      $(document).off("mouseup", mouseup);
      $(el).attr('transform', 'translate(' + initialX + ',' + initialY + ')');
    }
  }
});

var vm = new Vue({
  el: '#container'
});

svg {
  border: 1px solid black;
}

.node:hover {
  cursor: pointer;
}
.node:hover .split {
  fill: #F7ED5D;
}
.node .split {
  fill: #FDFFAB;
  stroke: #F7ED5D;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <svg id="palet" height="250" width="250">
    <g class="node" transform="translate(0, 75)">
      <polygon points="50,0 100,25 50,50 0,25" class="split" />
      <text x="35" y="30">Split</text>
    </g>
    <g class="node" transform="translate(0, 75)" v-drag>
      <polygon points="50,0 100,25 50,50 0,25" class="split" />
      <text x="35" y="30">Split</text>
    </g>
  </svg>
</div>