效果预览
功能简介
基于Vue.js（2.0）版本开发的，通过拖拽可视化的操作，生成H5的页面，类似易企秀的工具。
前端展示页面运用了之前发布的 vue-animate-fullpage 插件进行动画渲染。
tips：vue-animate-fullpage 插件 请移步文章：
vue-animate-fullpage 插件 juejin.cn/post/694574…
有哪些功能？
目前只能设置背景图片、插入图片、文本（文本设置字号、颜色）等，二期以后会逐步增加更多的功能。
有哪些动画效果？
目前采用的是开源的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>
在vue的methods生命周期中调用greet 即可。
methods: {
greet(val){
console.log(val)；
}
}
附上GitHub地址： github.com/ALazyTiger/…
