javascript 的 drag 和 drop 功能並抓到放入容器的物件,使用 interact.js

以往要做拖曳效果都是使用 jquery UI,現在就有很多別的選擇了,因為幫忙看功能所以找到了這個 interact.js,試著寫了一下覺得應該還滿方便的,就用來做個範例試試看。

首先還是先安裝,可以用 npm install 或是用 cdn





基本用法是選擇到物件就可以拖曳了
interact('.drag-and-resize')
  .draggable({
    snap: {
      targets: [
        { x: 100, y: 200 },
        function (x, y) { return { x: x % 20, y: y }; }
    ]}
  })
  .resizable({
    inertia: true
  });


我這邊則是改了一下官方的範例,做了一個可以偵測拖曳了多少東西到指定容器的功能

See the Pen Draggble by deathhell (@deathhell) on CodePen.



留言