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

Question

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

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

所以在append(element) 之后的元素我trigger('mousedown')，这是我的指令中的一个有效事件，但它没有被调用。有时间问题吗？

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

这是JSFiddle

注意：SO的sn-p有错误，不知道为什么。我建议你使用 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>