InteractJS是拖放、缩放和多点触控手势插件，并带有惯性和快照功能-BFW插件库

InteractJS是拖放、缩放和多点触控手势插件，并带有惯性和快照功能

InteractJS是一个JavaScript模块，它为最新的浏览器（包括IE8以上版本）增加了拖放、缩放和多点触控手势，并带有惯性和快照功能

InteractJS是一个JavaScript模块，它为最新的浏览器（包括IE8以上版本）增加了拖放、缩放和多点触控手势，并带有惯性和快照功能。
这个库的主要目的是替换jQuery UI所提供的功能。因此，使用InteractJS来编写的web应用在智能手机和平板上会更加易用。 InteractJS是一个轻量级的库，可以与SVG技术协作，处理多点触控输入，而把渲染元素以及设置其样式的任务留给了应用程序。

使用方式：

第一步引入bfwone

第二步use插件

第三步配置参数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["interact.min"], function() {
                // target elements with the "draggable" class
                interact('.item')
                .draggable({
                    // enable inertial throwing
                    inertia: true,
                    // keep the element within the area of it's parent
                    modifiers: [
                        interact.modifiers.restrictRect({
                            restriction: 'parent',
                            endOnly: true
                        })
                    ],
                    // enable autoScroll
                    autoScroll: true,

                    // call this function on every dragmove event
                    onmove: dragMoveListener,
                    // call this function on every dragend event
                    onend: function (event) {
                        var textEl = event.target.querySelector('p')

                        textEl && (textEl.textContent =
                            'moved a distance of ' +
                            (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
                                Math.pow(event.pageY - event.y0, 2) | 0))
                            .toFixed(2) + 'px')
                    }
                })
            });
        });
        function dragMoveListener (event) {
            var target = event.target
            // keep the dragged position in the data-x/data-y attributes
            var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
            var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

            // translate the element
            target.style.webkitTransform =
            target.style.transform =
            'translate(' + x + 'px, ' + y + 'px)'

            // update the posiion attributes
            target.setAttribute('data-x', x)
            target.setAttribute('data-y', y)
        }

        // this is used later in the resizing and gesture demos
        window.dragMoveListener = dragMoveListener
    </script>
    <style>
        .item {
            width: 25%;
            min-height: 6.5em;
            margin: 10%;
            background-color: #29e;
            color: white;
            border-radius: 0.75em;
            padding: 4%;
            touch-action: none;
            user-select: none;
            -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
        }
    </style>
</head>
<body>
    <div class="item">
        点击拖动
    </div>
</body>
</html>

官网：https://interactjs.io/