基于vue.js 移动可视化，拖拽生成H5系统

效果预览

功能简介

     基于Vue.js（2.0）版本开发的，通过拖拽可视化的操作，生成H5的页面，类似易企秀的工具，前端展示页面运用了之前发布的 vue-animate-fullpage 插件进行动画渲染。

    （vue-animate-fullpage 插件 请移步 文章：https://www.cnblogs.com/luobiao/p/13292205.html）

有哪些功能？

     目前只能设置背景图片、插入图片、文本（文本设置字号、颜色）等，二期以后会逐步增加更多的功能。

有哪些动画效果？

     目前采用的是开源的animate.css的动画库。

拖拽核心功能实现？

     通过自定义指令（v-drag）  ，加上该指令的元素，就可以实现拖拽。

 tips：新建自定义指令前需要清楚几个属性。

   pageX 、pageY：:鼠标指针的位置，文档的坐标。

   offsetLeft：指 元素 距离左方或上层控件左侧的距离。

   offsetTop： 指 元素 距离上方或上层控件顶部的距离。

直接上代码：

　　js代码：

 //在main.js中自定义一个全局指令v-drag

Vue.directive('drag', {

  //1.指令绑定到元素上回立刻执行bind函数，只执行一次

  //2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象

  //3.通过el.focus()是无法获取焦点的，因为只有插入DOM后才生效

  bind: function (el, binding) {

    let oDiv = el; //获取当前元素

    let firstTime = '', lastTime = '';

    oDiv.style.position = "absolute"; //要实现拖拽，要给元素添加绝对定位（如果元素css已经加上了，此处可以省略）

    el.onmousedown = function (e) {

　　//用元素距离视窗的X、Y坐标，减去当前元素最近的相对定位父元素的left、top值

      var disX = e.pageX - el.offsetLeft;

      var disY = e.pageY - el.offsetTop;

      oDiv.setAttribute('ele-flag', false)// 给当前元素添加属性，用于元素状态的判断

      oDiv.setAttribute('draging-flag', true)

      firstTime = new Date().getTime();

      document.onmousemove = function (e) {

        el.style.left = e.pageX - disX + 'px';//获得当前元素拖拽后的位置坐标

        el.style.top = e.pageY - disY + 'px';

        binding.value({ left: e.pageX - disX, top: e.pageY - disY }) //将拖拽后最新的坐标传递回组件内，方便组件获取使用

        return false;

      }

      document.onmouseup = function (event) {

        document.onmousemove = document.onmouseup = null;  //清除 onmousemove 事件

        lastTime = new Date().getTime(); 

        if ((lastTime - firstTime) > 200) {

          oDiv.setAttribute('ele-flag', true)

          event.stopPropagation(); //阻止冒泡

        }

        setTimeout(function () {

          oDiv.setAttribute('draging-flag', false)

        }, 100)

      }

    }

  },

})

 组件代码

//html代码 

 <div id="app">

　　<div class="drag-box"  v-drag="greet"></div> <!--v-drag是自定义指令，加上该指令的元素，可以实现拖拽-->  此处 的greet 为接收自定义指令回传坐标

</div>

js 代码

在vue的methods生命周期中调用greet 即可。

methods: {

　　  greet(val){

        　　console.log(val)；

      }

   }

 

附上GitHub地址：https://github.com/ALazyTiger/alazytigerDragH5.git