追加元素后如何触发指令事件?

埃尔法耶

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

我希望新添加的元素在添加后直接拖动(避免再次单击以将其拖动)。

因此,append(element)在元素I之后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>

埃尔法耶

这是我使用的解决方案:

  • 我重复小组<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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章