由于一直没能解决上篇文章提到的编译问题, 只好使用了另外一个js库interact来替代.具体用法如下:
- 通过npm安装interact
npm install interactjs@next --save
// + [email protected]
// added 13 packages in 13.036s
- 具体代码逻辑示例如下
import interact from 'interactjs';
somefunction() {
const that = this;
// 假设mainContent为根元素的id
const mainZone = document.getElementById('mainContent');
let nodeCopy: HTMLElement = null;
// draggable 为可拖拽的class, 在html中定义某个元素的class为draggable则表示它支持拖拽
interact('.draggable').draggable({
onstart(event) {
// 默认情况下没有副本跟随鼠标移动;在拖拽开始时,可以复制一个对象出来,并自定义样式
// 当然也可以不这么做, just you like
nodeCopy = (event.target as Node).cloneNode() as HTMLElement;
mainZone.appendChild(nodeCopy);
nodeCopy.style.zIndex = '1000';
nodeCopy.style.opacity = '0.5';
nodeCopy.style.width = '60px';
nodeCopy.style.height = '60px';
},
onmove(event) {
// 实时更新nodeCopy的位置
nodeCopy.style.left = event.client.x + 'px';
nodeCopy.style.top = event.client.y + 'px';
},
onend(event) {
mainZone.removeChild(nodeCopy);
// 拖拽结束后,判断被拖拽元素的当前位置,如果在3D画布区域内,则可以触发自定义事件
// const threeCanvas = ....
const threeCanvas = document.getElementById('canvasName');
const rect = threeCanvas.getBoundingClientRect();
const evtX = event.client.x;
const evtY = event.client.y;
if (evtX < rect.left || evtX > rect.right || evtY < rect.top || evtY > rect.bottom) {
// 不在3D画布内
return;
} else {
// 落入3D画布内
}
});
}
通过以下方式编译正常:
ng build --prod --release