效果預覽
功能簡介
基於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