Question

我有以下代码：

JS

new Vue({
    el: 'body',
  data: {
    image: 'http://wpmedia.news.nationalpost.com/2016/07/faroe-islands-sheep-view.jpg?quality=65&strip=all&w=620'
  },

  ready:function(){
    this.setDraggable();
  },

  methods:{
    setDraggable: function(){

      var x1 = $('.img').width();
      var x2 = $('.bb-image-drag').width();

      $( ".bb-image-drag" ).draggable({
        axis: "x",
        drag: function(event, ui) {
          if(ui.position.left >= 0)
          ui.position.left = 0;
          else if(ui.position.left <= x1 - x2)
          ui.position.left = x1 - x2;
        },
        stop: function(event, ui) { $('#bbOffset').val(ui.position.left); }
      });
    }
  }
})

加价

<div class="img mob-nom-img" style="position: relative;">
  <div class="text-center">
  <span style="margin-top: 400px;left: 30%;" class="drag-label">&#8596;  Drag to adjust</span></div>
  <img :src="image" class="bb-image-drag">
</div>

https://jsfiddle.net/yn99de5n/3/

但是，拖动功能不正常。它正在快速滑动并拖动到0到最大值。

我认为这主要是因为Vue是在可拖动函数调用之后呈现的。但我找不到解决这个问题的方法。有什么想法吗？

Vue.js和jQuery Draggable无法正常工作

0 个答案: