使用 interact.js进行dom拖动-CSDN博客

本文链接：https://blog.csdn.net/KimBing/article/details/123574342

本文介绍了如何在Vue应用中利用interact.js库实现DOM元素的拖动功能，包括安装、引入、API应用和事件监听。通过实例演示了如何设置拖动选项并处理移动和结束事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 interact.js 进行 dom 拖动

interact.js 是一个非常好用的可以任意拖动元素的库

GitHub: https://github.com/taye/interact.js
官方站点: https://interactjs.io/

安装，引用

注意： interactjs 跟 interact.js 是两个不同的库，这里用的是 interactjs

# npm
npm i interactjs

# yarn
yarn add interactjs

vue 中这样引入

import interact from "interactjs"

使用

使用很简单，

官方API

请添加图片描述

interact()

interact(this.$refs.header) // 这里可以是class名，id，或dom实体，这里直接传入的 dom 对象
    .draggable({
        // enable inertial throwing
        inertia: true,
        // 是否保持 dom 元素在其父 dom 中
        modifiers: [
            interact.modifiers.restrictRect({
                restriction: 'parent',
                endOnly: true
            })
        ],
        // enable autoScroll
        autoScroll: true,

        listeners: {
            // 移动事件
            move: this.dragMoveListener,

            // 移动结束事件
            end: this.dragMoveListener
        }
    })
window.dragMoveListener = this.dragMoveListener

interact 库中返回的 event 跟普通的 mousemove 事件不同
其中的 event.dx event.dy 是鼠标拖动的距离，不再需要自己计算，直接使用即可

methods: {
    dragMoveListener(event){
        // console.log(event)
        this.positionX = this.positionX + event.dx
        this.positionY = this.positionY + event.dy
        console.log(this.positionX, this.positionY)
    },
}