全局自定义拖拽vue

最新推荐文章于 2024-08-29 15:10:00 发布

一架打字机

最新推荐文章于 2024-08-29 15:10:00 发布

阅读量228

点赞数 1

文章标签： vue.js javascript 前端 scss 前端框架

本文链接：https://blog.csdn.net/iseyre/article/details/123559075

版权

本文介绍了如何在Vue项目中实现全局自定义拖拽功能。首先，在根目录创建tz.js，然后在main.js中引入并注册为Vue的自定义指令。最后，在app.vue组件中应用该指令，实现拖拽效果。

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

1/在根目录创建一个tz.js

export default {
    inserted(el) {
        let switchPos = {
            x: 10,
            y: 85,
            startX: 0,
            startY: 0,
            endX: 0,
            endY: 0
        }
        el.addEventListener('touchstart', function (e) {
            console.log(e)
            switchPos.startX = e.touches[0].pageX
            switchPos.startY = e.touches[0].pageY
        })
        el.addEventListener('touchend', function (e) {
            switchPos.x = switchPos.endX
            switchPos.y = switchPos.endY
            switchPos.startX = 0
            switchPos.startY = 0
        })
        el.addEventListener('touchmove', function (e) {
            if (e.touches.length > 0) {
                let offsetX = e.touches[0].pageX - switchPos.startX
                let offsetY = e.touches[0].pageY - switchPos.startY
                let x = switchPos.x - offsetX