interactjs 拖拽缩放的交互库

原文链接:interactjs 拖拽缩放的交互库...

阿豪boy

529人浏览 · 2020-07-14 22:14:00

阿豪boy · 2020-07-14 22:14:00 发布

原文链接: interactjs 拖拽缩放的交互库

上一篇: html2canvas 将html绘制到canvas中 [不建议使用]

下一篇: 使用 freessl.cn 为自己的静态netlify站点添加 https

只提供事件钩子和数据, 并不会直接修改dom, 需要自己手动根据数据修改样式

拖拽并记录移动的位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/interact.js/1.9.20/interact.js"></script>
</head>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
  }

  .wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    border: 1px solid black;
    height: 500px;
  }

  .box {
    width: 50px;
    height: 50px;
    background: deepskyblue;
  }
</style>
<body>
<div class="wrap">
  <div class="box">
    <p id="text"></p>
  </div>
</div>

<script>
  function setText(dx = 0, dy = 0) {
    let p = document.getElementById('text')
    p.innerText = `dx:${dx | 0},dy:${dy | 0} `
  }

  // target elements with the "draggable" class
  interact('.box')
    .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,

      listeners: {
        // call this function on every dragmove event
        move: dragMoveListener,

        // call this function on every dragend event
        end(event) {
          setText(event.pageX - event.x0, event.pageY - event.y0)
        }
      }
    })

  function dragMoveListener(event) {
    let target = event.target
    // keep the dragged position in the data-x/data-y attributes
    let x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
    let y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

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

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

  // this function is used later in the resizing and gesture demos
  window.dragMoveListener = dragMoveListener
</script>
</body>
</html>