笨蛋:https://plnkr.co/edit/uZ8mvu6a1LXAsBBY3Shd?p=preview
在顶部,我有“小部件”:您可以拖放的“文本 a”和“文本 b”。
在小部件下方,您有两行已经在里面的小部件。 我有一个
- block 容器
- block 行(蓝色背景)
- block 列(粉红色背景)
- block (红色背景)
- block 列(粉红色背景)
- block 行(蓝色背景)
基本上类似于 Bootstrap 网格。
1) 当我将“文本 a”小部件拖到红色 block 上时,小部件被添加但我没有调用回调函数 “onDragEnter”。我只在 console.log onDropSuccess 中得到。
当我将小部件拖到容器、行、列和 block 上时,我希望收到回电,以便我可以添加逻辑。
我尝试添加我的功能,但没有用,也无法找出错误所在。
我希望有人能帮助解决这个问题。
//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;
}
最佳答案
您需要做的是在您的 html 中向您的项目添加两件事。
第一个是这个
(dragover)="$event.preventDefault()"
它会做的是,它允许您放入该项目,您已经在其他地方处理过该项目,但通过在此处执行此操作,您可以注册下一个回调。
接下来你需要添加的是这个
(dragenter)="onDragEnter('',$event)"
这实际上会调用 onDragEnter 函数,并将事件链接到它。 您当然可以更改参数以匹配您的需要。
至于 plunker,您可以在第 38 行将这两个添加到您的 plunker 并且它可以工作,这样您就不必尝试理解新的架构。
注意:我建议您不要在 onDragEnter 中使用警报(就像现在那样),因为您会收到它们的垃圾邮件。
我还建议查看 https://www.w3schools.com/html/html5_draganddrop.asp因为它提供了关于如何使用事件进行拖放的非常易于使用的解释。
如果您需要更多帮助,我会非常乐意提供帮助,请告诉我您的困惑所在。
关于Angular 2 - 拖放回调函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43505632/