本期介紹一個前端拖拽外掛
interact.js
，JavaScript拖放、調整大小和多點觸控手勢，適用於瀏覽器（以及IE9+）。
interact。js採用了一種與大多數拖放庫略有不同的方法。為了儘可能多地提供控制，它嘗試提供一個簡單、靈活的API，該API為您提供移動元素所需的所有拖拽api
安裝
npm install interactjs
CDN直接引入
使用教程
拖拽
拖拽是interactive 。js提供的最簡單的動作。要使元素可拖放，請建立一個與您想要的目標可互動的元素，然後使用您需要的選項呼叫拖放方法。
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
