vue组件随鼠标移动功能和移动端

最新推荐文章于 2023-07-27 10:28:00 发布

qq_34707038

最新推荐文章于 2023-07-27 10:28:00 发布

阅读量570

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_34707038/article/details/113247893

版权

本文介绍了如何在Vue中创建一个组件，该组件能够根据鼠标的位置动态移动。通过注册自定义钩子，我们可以监听鼠标的移动事件，并更新组件的位置，从而实现组件随鼠标移动的效果。同时，也探讨了将此功能应用于移动端的可能性。

摘要由CSDN通过智能技术生成

给组件注册自定义钩子并获取该组件

directives: {
   
      drag:  {
   
        bind(el, binding, vnode, oldVnode){
   
          console.log('bind回调');
        },
        inserted: function (el, binding){
   
       	let dragBox = el; //获取当前元素
         //判断移动端和电脑端
         //移动端
        const handler = (e) => {
   
        	e.preventDefault()
        }
        //addEventListener和removeEventListener必须一致，所以要将方法付给变量
        let _x_start,_y_start,
            _x_end,_y_end,
            left_start,top_start;
            dragBox