前端拖拽插件interact.js

2020-12-24 10:04:43 阅读：345 来源： 互联网

标签：插件 scale angle interact dropzone angleScale js event

本期介绍一个前端拖拽插件interact.js，JavaScript拖放、调整大小和多点触控手势，适用于浏览器(以及IE9+).

interact.js采用了一种与大多数拖放库略有不同的方法。为了尽可能多地提供控制，它尝试提供一个简单、灵活的API，该API为您提供移动元素所需的所有拖拽api

安装

npm install interactjs

CDN直接引入

<script src='interact.min.js'></script>

使用教程

拖拽

拖拽是interactive .js提供的最简单的动作。要使元素可拖放，请创建一个与您想要的目标可交互的元素，然后使用您需要的选项调用拖放方法。

<div class="draggable"> Draggable Element </div>
const position = { x: 0, y: 0 }

interact('.draggable').draggable({
  listeners: {
    start (event) {
      console.log(event.type, event.target)
    },
    move (event) {
      position.x += event.dx
      position.y += event.dy

      event.target.style.transform =
        `translate(${position.x}px, ${position.y}px)`
    },
  }
})

dragmove还有dragEnter和dragLeave 两个事件

调整大小

Resize事件有rect和deltaRect属性。rect在每个resizemove事件上更新，deltaRect中的值反映了更改。在resizestart中，rect将与interactable返回的rect相同。getrect (element)和deltaRect将具有全零属性。

interact('.resizable')
  .resizable({
    edges: { top: true, left: true, bottom: true, right: true },
    listeners: {
      move: function (event) {
        let { x, y } = event.target.dataset

        x = (parseFloat(x) || 0) + event.deltaRect.left
        y = (parseFloat(y) || 0) + event.deltaRect.top

        Object.assign(event.target.style, {
          width: `${event.rect.width}px`,
          height: `${event.rect.height}px`,
          transform: `translate(${x}px, ${y}px)`
        })

        Object.assign(event.target.dataset, { x, y })
      }
    }
  })

拖动和放置

dropzone定义了可拖放目标的元素，以及哪些元素可以被接受。和拖放事件一样，拖放事件不会修改DOM来重新创建父元素。如果需要，您必须在自己的事件监听器中这样做。

Dropzone Events

interact(dropTarget)
  .dropzone({
    ondrop: function (event) {
      alert(event.relatedTarget.id
            + ' was dropped into '
            + event.target.id)
    }
  })
  .on('dropactivate', function (event) {
    event.target.classList.add('drop-activated')
  })

accept

dropzone接受选项是一个CSS选择器或元素，它必须匹配被拖动的元素，以便触发拖放事件。

interact('.dropzone').dropzone({
  accept: '.drag0, .drag1',
});

checker

checker选项是一个函数，你可以设置它来另外检查一个拖动的元素是否可以拖放到dropzone中。

interact(target).dropzone({
  checker: function (
    dragEvent,         // related dragmove or dragend
    event,             // Touch, Pointer or Mouse Event
    dropped,           // bool default checker result
    dropzone,          // dropzone Interactable
    dropzoneElement,   // dropzone element
    draggable,         // draggable Interactable
    draggableElement   // draggable element
  ) {

    // only allow drops into empty dropzone elements
    return dropped && !dropElement.hasChildNodes();
  }
});

多点触摸旋转(仅触摸屏)

当两个手指移动时，手势事件被触发。在手势事件中，页面和客户端坐标是触摸坐标的平均值，速度是根据这些平均值计算的。

var angle = 0

interact('#rotate-area').gesturable({
  listeners: {
    move (event) {
      var arrow = document.getElementById('arrow')

      angle += event.da

      arrow.style.webkitTransform =
      arrow.style.transform =
        'rotate(' + angle + 'deg)'

      document.getElementById('angle-info').textContent =
        angle.toFixed(2) + '\u00b0'
    }
  }
})

记住使用CSS touch-action: none来防止当用户用触摸指针拖动时浏览器进行平移，user-select: none来禁用文本选择。

双指放大(仅触摸屏)

和旋转方法一样

var angleScale = {
  angle: 0,
  scale: 1
}
var gestureArea = document.getElementById('gesture-area')
var scaleElement = document.getElementById('scale-element')
var resetTimeout

interact(gestureArea)
  .gesturable({
    listeners: {
      start (event) {
        angleScale.angle -= event.angle

        clearTimeout(resetTimeout)
        scaleElement.classList.remove('reset')
      },
      move (event) {
        // document.body.appendChild(new Text(event.scale))
        var currentAngle = event.angle + angleScale.angle
        var currentScale = event.scale * angleScale.scale

        scaleElement.style.webkitTransform =
        scaleElement.style.transform =
          'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'

        // uses the dragMoveListener from the draggable demo above
        dragMoveListener(event)
      },
      end (event) {
        angleScale.angle = angleScale.angle + event.angle
        angleScale.scale = angleScale.scale * event.scale

        resetTimeout = setTimeout(reset, 1000)
        scaleElement.classList.add('reset')
      }
    }
  })
  .draggable({
    listeners: { move: dragMoveListener }
  })

function reset () {
  scaleElement.style.webkitTransform =
    scaleElement.style.transform =
    'scale(1)'

  angleScale.angle = 0
  angleScale.scale = 1
}

Tap, doubletap and hold

手指事件: 单击双击长按

interact('.tap-target')
  .on('tap', function (event) {
    event.currentTarget.classList.toggle('switch-bg')
    event.preventDefault()
  })
  .on('doubletap', function (event) {
    event.currentTarget.classList.toggle('large')
    event.currentTarget.classList.remove('rotate')
    event.preventDefault()
  })
  .on('hold', function (event) {
    event.currentTarget.classList.toggle('rotate')
    event.currentTarget.classList.remove('large')
  })

感谢阅读，了解更多API是如何工作的，请阅读文档，文档地址：https://interactjs.io/docs/events#pointer-events

标签：插件,scale,angle,interact,dropzone,angleScale,js,event
来源： https://blog.csdn.net/weixin_43960538/article/details/111601439

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9