interact.js 快速入门

介绍

特点：

• 开源
• 灵活

安装：

npm i interactjs

# "interactjs": "^1.10.23",

拖拽

示例：

<template>
  <div class="box">
    <div class="item"> item1 </div>
    <div class="item"> item2 </div>
    <div class="item"> item3 </div>
  </div>
</template>
<script>
import interact from 'interactjs';

export default {
  mounted() {
    interact('.box .item')
      .draggable({
        autoScroll: true,
        
        // 不改变光标样式
        cursorChecker: () => 'default', 
        
        listeners: {
          start: (event) => {
            event.target.classList.add('dragging');
          },
          move: (event) => {
            const { dx, dy, target } = event;

            const { left, top } = target.style;

            const x = parseFloat(left);
            const y = parseFloat(top);

            target.style.left = `${x + dx}px`;
            target.style.top = `${y + dy}px`;
          },
          end: () => {
            event.target.classList.add('dragging');
          },
        },
      });
  }
}
</script>

参考

• 官网 (opens new window)