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.