Plunker: https://plnkr.co/edit/uZ8mvu6a1LXAsBBY3Shd?p=preview
在顶部，我有两个“小部件”：‘Text a’和‘Text b’，您可以拖放它们。
小部件下面有两行已经包含小部件的行。
- 块容器
- 块行（蓝色背景）
- 块列（粉色背景）
- 块（红色背景）
- 块列（粉色背景）
- 块行（蓝色背景）
基本上就像Bootstrap网格一样。
1）当我将“text a”小部件拖动到红色块上时，该小部件被添加，但我没有回调“onDragEnter”函数。我只得到了onDropSuccess的console.log。
我希望在拖动小部件到容器、行、列和块上时能够得到回调，以便我可以添加逻辑。
我尝试添加我的函数，但不起作用，也无法找出错误所在。
希望有人能帮忙解决这个问题。
//Drag functions
drop(item){
alert('dropped')
console.log('dropping event', item)
var target = item.mouseEvent.target,
index;
if(target.classList.contains('row')) {
index = target.getAttribute('data-index');
}
if(target.classList.contains('item') && target.parentNode.classList.contains('row')) {
index = target.parentNode.getAttribute('data-index');
}
if(index) {
console.log(this.containers);
console.log(this.containers[index]);
this.containers[index].widgets.push( item.dragData);
} else {
this.containers.push([ item.dragData]);
}
}
onDropSuccess(widget: any, event: any, objecType: string) {
console.log('dropped on ', objecType)
if( objecType == 'row'){
console.log('dropped on', objecType)
}
else if(objecType == 'block'){
console.log('dropped on ', objecType)
}
this.dragOperation = false;
console.log('onDropSuccess x', widget, event);
console.log('containers', this.containers)
}
onDragStart(widget: any, event: any) {
console.log('onDragStart', widget, event);
}
onDragEnter(widget: any, event: any) {
alert('entered ')
console.log('onDragEnter', widget, event);
console.log('drag enter containers', this.containers)
}
chicken(event) {
console.log('onDragEnter chicken', event);
}
onDragSuccess(widget: any, event: any) {
console.log('onDragSuccess', widget, event);
}
onDragOver(widget: any, event: any) {
console.log('onDragOver', widget, event);
}
onDragEnd(widget: any, event: any) {
console.log('onDragOver', widget, event);
}
onDragLeave(widget: any, event: any) {
console.log('onDragLeave', widget, event);
}
onMouseDown(){
this.dragOperation = true;
console.log('mouse down');
}
onMouseUp(event: any){
console.log(event);
this.dragOperation = false;
}