企业级网站开发与部署,上海做推广的公司,简单的网站制作代码,网站建设可用性的五个标准首先在自己的项目根目录下建一个 src -- config -- drag.js
然后在main.js中全局引入
//鼠标拖动 import drag from /config/drag; Vue.use(drag);
drag.js文件相关代码
import Vue from vue;
//使用Vue.directive()定义一个全局指令
//1.参数一#xff1a;指令的… 首先在自己的项目根目录下建一个 src -- config -- drag.js
然后在main.js中全局引入
//鼠标拖动 import drag from /config/drag; Vue.use(drag);
drag.js文件相关代码
import Vue from vue;
//使用Vue.directive()定义一个全局指令
//1.参数一指令的名称定义时指令前面不需要写v-
//2.参数二是一个对象该对象中有相关的操作函数
//3.在调用的时候必须写v-
const drag Vue.directive(drag, {//1.指令绑定到元素上回立刻执行bind函数只执行一次//2.每个函数中第一个参数永远是el表示绑定指令的元素el参数是原生js对象//3.通过el.focus()是无法获取焦点的因为只有插入DOM后才生效// bind: function (el) {},//inserted表示一个元素插入到DOM中会执行inserted函数只触发一次inserted: function (el) {//子元素的id里面只要包含字符串title都可以捕捉到if (el.firstChild.id.indexOf(floatTitle) ! -1) {el.firstChild.onmousedown function (e) {var disx e.pageX - el.offsetLeft;var disy e.pageY - el.offsetTop;// console.log(e.pageX,el.offsetLeft);document.onmousemove function (e) {// el.style.cursor move;el.style.left e.pageX - disx px;el.style.top e.pageY - disy px;// console.log(el.style.left,el.style.top);}document.onmouseup function () {// el.style.cursor default;document.onmousemove document.onmouseup null;}}} else {el.onmousedown function (e) {var disx e.pageX - el.offsetLeft;var disy e.pageY - el.offsetTop;// console.log(e.pageX,el.offsetLeft);document.onmousemove function (e) {// el.style.cursor move;el.style.left e.pageX - disx px;el.style.top e.pageY - disy px;// console.log(el.style.left,el.style.top);}document.onmouseup function () {// el.style.cursor default;document.onmousemove document.onmouseup null;}}}},//当VNode更新的时候会执行updated可以触发多次// updated: function (el) {}
});
export default drag;
在组件中使用
div v-drag classouterContaindiv classfloatLayer idfloatTitle/div
/div
