snappable磁吸
https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html
1.屬性
this.moveable = new Moveable(
this.$refs.content, // moveable元素的父元素
{
className: "moveable", // 可交互組件的class名稱
target: this.$refs.example, // movable元素
origin: false, // movable元素的中心點是否可見,default: true
/**拖拽屬性 */
draggable: true, // 是否支持可拖拽,default: false
/**更改大小屬性 */
resizable: true, // 是否支持更改大小
snappable: true, // 是否初始化磁吸功能
snapContainer: this.$refs.container, // 磁吸功能(輔助線)的容器
snapThreshold: 10, // 磁吸效果觸發(fā)的臨界值,即元素與輔助線間距小于x,則自動貼邊
bounds: this.$refs.content.getBoundingClientRect(), // moveable操作元素的外邊界值(即包裹moveable元素的dom內(nèi)邊界){left, top, right, bottom}
innerBounds: this.$refs.inner.getBoundingClientRect(), // moveable操作元素的內(nèi)邊界值(即moveable元素包裹的dom的外邊界){left, top, right, bottom}
elementGuidelines: [this.$refs.content], // 磁吸效果輔助線的dom列表
elementSnapDirections: {
left: true,
top: true,
right: true,
bottom: true,
center: true,
middle: true,
}, // 每個dom的磁吸輔助線的方位,默認(rèn)四邊 default: { left: true, top: true, right: true, bottom: true }
// horizontalGuidelines: [100, 200, 300, 400], // 水平方向自定義的輔助線列表,[注意:此屬性是相對于整個snapContainer元素的坐標(biāo)]
// verticalGuidelines: [100, 200, 300, 400], // 垂直方向自定義的輔助線列表,[注意:此屬性是相對于整個snapContainer元素的坐標(biāo)]
isDisplaySnapDigit: true, // 是否展示與磁吸輔助線的距離,當(dāng)moveable元素在磁吸參照元素之外時,moveable元素距離磁吸元素輔助線的虛線長度
isDisplayInnerSnapDigit: true, // 是否展示與磁吸輔助線的距離,當(dāng)moveable元素內(nèi)部存在磁吸參照元素時,moveable元素距離磁吸元素輔助線的虛線長度
snapDirections: { left: true, top: true, right: true, bottom: true, center: true, middle: true }, // moveable的target所需要觸發(fā)磁吸效果的方位,默認(rèn)上下左右四條邊default: { left: true, top: true, right: true, bottom: true }
snapDistFormat: v => `${v}px`, // 元素與輔助線之間距離的展示文本
// snapGap: true, // 暫未發(fā)現(xiàn)實際作用 當(dāng)moveable元素拖動時,元素與輔助線之間是否有空隙default: true(實際測試時,值更改為true或false,未發(fā)現(xiàn)實際效果,可能是我的應(yīng)用場景不對)
// snapGridHeight: 50, // 暫未發(fā)現(xiàn)實際作用
// snapGridWidth: 50, // 暫未發(fā)現(xiàn)實際作用
// snapDigit: 10, // 暫未發(fā)現(xiàn)實際作用
}
);
2.事件
- snap
// this.moveable.on('snap', this.snap)
snap(e) {
const {
currentTarget, // 當(dāng)前操作的moveable實例
elements, // [element] 與moveable發(fā)生磁吸交互的dom元素: 即elementGuidelines中的元素
eventType, // 事件類型:"snap"
gaps, // 元素之間的間隙[暫未發(fā)現(xiàn)實際作用,該數(shù)組一直是空數(shù)組]
guidelines, // horizontalGuideline和verticalGuidelines(包括bounds和innerBounds)中與moveable發(fā)生交互的輔助線數(shù)組
stop // function類型[暫未發(fā)現(xiàn)實際作用]
} = e
console.log(e);
},
