效果预览

功能简介

     基于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