您现在的位置是:首页 > 前端开发 > vue全家桶

vue-cli 拖拽案例

admin2019-06-18vue全家桶 人已围观

简介vue-cli 拖拽案例,最近也在项目中写了一个拖拽,然后记录一下来。

第一步html 代码

注意 : 家自定义事件 ,哪里你必须加上ID,
 
<template>
  <article id="main_main" ref="elememt"  style="padding: 200px">
    <div style="background-color: red;width: 50px;height: 50px;position: absolute" id="boxs"  v-drag="greet" :draggable="true"></div>
  </article>
</template>


引入 Vue 

 

<script>
  import Vue from 'vue'

  export default {
    name: "ches",
    methods: {
      greet(val){
        console.log(val)
      }
    }
  }


  /*  自定义命令  */
  Vue.directive('drag',//自定义指令   JS
    {
      bind: function (el, binding) {
        let oDiv = el;   //当前元素
        let self = this;  //上下文
        oDiv.onmousedown = function (e) {
          //鼠标按下,计算当前元素距离可视区的距离
          let disX = e.clientX - oDiv.offsetLeft;
          let disY = e.clientY - oDiv.offsetTop;

          document.onmousemove = function (e) {
            //通过事件委托,计算移动的距离
            let l = e.clientX - disX;
            let t = e.clientY - disY;
            //移动当前元素
            oDiv.style.left = l + 'px';
            oDiv.style.top = t + 'px';

          };
          document.onmouseup = function (e) {
            //将此时的位置传出去
            binding.value({x: e.pageX, y: e.pageY});  // => 这个可以放到移动上面也是可以的,

            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  );

</script>


 

很赞哦!26

文章评论

      匿名评论
    • 评论
    人参与,条评论

站点信息

  • 建站时间:2018-12-23
  • 网站程序:帝国CMS7.5
  • 文章统计: 183
  • 文章评论:490条
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们