【亲测免费】 interact.js 使用教程

最新推荐文章于 2025-06-15 09:56:42 发布

丁骥治

最新推荐文章于 2025-06-15 09:56:42 发布

阅读量849

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/gitblog_01046/article/details/141379155

interact.js 使用教程

项目介绍

interact.js 是一个用于处理拖放、调整大小和多点触控手势的 JavaScript 库。它提供了强大的功能，同时保持轻量级和高效。interact.js 可以轻松集成到任何现代 Web 项目中，支持桌面和移动设备。

项目快速启动

安装

你可以通过 npm 安装 interact.js：

npm install interactjs

或者直接在 HTML 文件中引入：

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>

基本使用

以下是一个简单的示例，展示如何使用 interact.js 实现拖放功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>interact.js 示例</title>
    <style>
        #draggable {
            width: 100px;
            height: 100px;
            background-color: #f00;
            color: #fff;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="draggable">拖动我</div>

    <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
    <script>
        interact('#draggable').draggable({
            onmove: function (event) {
                var target = event.target;
                var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
                var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

                target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
                target.setAttribute('data-x', x);
                target.setAttribute('data-y', y);
            }
        });
    </script>
</body>
</html>