基于Vue完结拖拽效果

5.有多少个常用的点子

最后

配置:package.json

相同点 不同点
clientY 距离页面左上角距离
pageY 距离页面左上角的距离

二个是拖动中

clientY 指的是距离可视页面左上角的离开
pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)
screenY 指的是离开显示器左上角的相距
layerY 指的是找到它或它父级成分中近来怀有一定的左上角距离
offsetY 指的是离开它和煦左上角的离开
一张图带大家简单询问理解

 methods: {
   getdata (evt) {
    console.log(evt.draggedContext.element.id)
   },
   datadragEnd (evt) {
    console.log('拖动前的索引 :' + evt.oldIndex)
    console.log('拖动后的索引 :' + evt.newIndex)
    console.log(this.tags)
   }
  }
相同点 不同点
layerY 距离元素的左上角距离 受元素的定位的影响,会从本元素往上找到第一个定位的元素的左上角
offsetY 距离元素左上角的距离 计算相对于本元素的左上角,不在乎定位问题,计算的是内交点。是IE浏览器的特有属性

以往您就足以自身尝尝使用了。

分清clientY pageY screenY layerY offsetY的区别

以上便是本文的全体内容,希望对我们的就学抱有协助,也愿意我们多多帮忙脚本之家。

// darg.html

三个是拖动甘休

在大家大约询问完那一个特天性以往,有多少个属性供给分清。

import draggable from 'vuedraggable'

在大家想要做出拖拽这些成效的时候,大家须要分清这几个性情的区分,这几脾本性都是计量鼠标点击的偏移值,大家须求对其开始展览掌握才足以承继贯彻大家的拖拽效果

2.在您的零件中引入正视:

当然,大家得以将它绑定为二个自定义指令,那样的话就能够用调用指令的情势来兑现拖拽效果,上面是概念自定义指令的代码

3.挂号:draggable那么些组件

demo1.gif

1.下载包:npm install vuedraggable

到此地大家就早已把拖拽效果用Vue达成了,大家用了三种差别的措施完结了拖拽,但其实换汤不换药,大家必要澄清楚pageY、screenY、clientY、layerY、offsetY等界别。当然我们同一时间也学习了Vue的局地办法,举例自定义指令等。

"dependencies": {
  "element-ui": "^1.3.4",
  "less": "^2.7.2",
  "less-loader": "^4.0.4",
  "vue": "^2.3.3",
  "vue-router": "^2.3.1",
  "vuedraggable": "^2.11.0"
 },

以上所述是小编给大家介绍的依照Vue完结拖拽效果,希望对我们享有支持,假设大家有此外疑问请给自己留言,我会及时过来大家的。在此也特别谢谢大家对剧本之家网址的支持!

您大概感兴趣的稿子:

图片 1 

神速落成Vue.Draggable的拖拽效果,供大家参照他事他说加以考查,具体内容如下

区别

<draggable v-model="tags" :move="getdata" @update="datadragEnd">
    <transition-group>
      <div v-for="element in tags" :key="element.id">
        {{element.name}}
      </div>
    </transition-group>
</draggable>

我们既是熟习了那多少个偏移属性的情致,那么大家就进入大家的入眼。话相当的少说一向上代码

components: {
  draggable
},

图片 2 

4.应用html模板中动用该器件

// darg.html

你或然感兴趣的篇章:

效果图

<style>
  #app{
    position: relative;   /*定位*/
    top: 10px;
    left: 10px;
    width: 200px;
    height: 200px;
    background: #666;    /*设置一下背景*/
  }
</style>
<body>
  <div id="app" @mousedown="move">    <!--绑定按下事件-->
    {{positionX}}
    {{positionY}}
  </div>
</body>
//main.js
let app = new Vue({
  el:'#app',
  data:{
    positionX:0,
    positionY:0,
  },
  methods:{
    move(e){
      let odiv = e.target;    //获取目标元素

      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      let disY = e.clientY - odiv.offsetTop;
      document.onmousemove = (e)=>{    //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
        let left = e.clientX - disX;  
        let top = e.clientY - disY;

        //绑定元素位置到positionX和positionY上面
        this.positionX = top;
        this.positionY = left;

        //移动当前元素
        odiv.style.left = left + 'px';
        odiv.style.top = top + 'px';
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }  

  },
  computed:{},
});

图片 3 

兑现拖拽作用

<style>
  #app{
    position: relative;   /*定位*/
    top: 10px;
    left: 10px;
    width: 200px;
    height: 200px;
    background: #666;    /*设置一下背景*/
  }
</style>
<body>
  <div id="app" v-drag>    <!--实现用指令形式实现拖拽效果-->

  </div>
</body>
//main.js

let app = new Vue({
  el:'#app',
  data:{},
  methods:{},
  directives: {
    drag: {
      // 指令的定义
      bind: function (el) {
        let odiv = el;  //获取当前元素
        oDiv.onmousedown = (e) => {
          //算出鼠标相对元素的位置
          let disX = e.clientX - odiv.offsetLeft;
          let disY = e.clientY - odiv.offsetTop;

          document.onmousemove = (e)=>{
            //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
            let left = e.clientX - disX;  
            let top = e.clientY - disY;

            //绑定元素位置到positionX和positionY上面
            this.positionX = top;
            this.positionY = left;

            //移动当前元素
            odiv.style.left = left + 'px';
            odiv.style.top = top + 'px';
          };
          document.onmouseup = (e) => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  }
});

layerY与offsetY区别

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图