我创建了一个像这样的可拖动指令
@Input('makeDraggable') data: any;
@Output() droppedDrag: EventEmitter<any> = new EventEmitter();
constructor(private _elementRef: ElementRef) {}
ngOnInit() {
// Get the current element
let el = this._elementRef.nativeElement.querySelector('li');
// Set the draggable attribute to the element
el.draggable = 'true';
// Set up the dragstart event and add the drag-src CSS class
// to change the visual appearance. Set the current todo as the data
// payload by stringifying the object first
el.addEventListener('dragstart', (e) => {
console.log('Start');
el.classList.add('drag-src')
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text', this.data);
this.droppedDrag.emit(e);
});
// Remove the drag-src class
el.addEventListener('dragend', (e) => {
e.preventDefault();
el.classList.remove('drag-src');
});
像这样的和droppable指令
@Output() dropped: EventEmitter<any> = new EventEmitter();
constructor(private _elementRef: ElementRef) {}
ngOnInit() {
let el = this._elementRef.nativeElement;
// Add a style to indicate that this element is a drop target
el.addEventListener('dragenter', (e) => {
el.classList.add('over');
});
// Remove the style
el.addEventListener('dragleave', (e) => {
el.classList.remove('over');
});
el.addEventListener('dragover', (e) => {
if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffect = 'move';
return false;
});
// On drop, get the data and convert it back to a JSON object
// and fire off an event passing the data
el.addEventListener('drop', (e) => {
if (e.stopPropagation) {
e.stopPropagation(); // Stops some browsers from redirecting.
}
el.classList.remove('over');
let data = JSON.parse(e.dataTransfer.getData('text'));
this.dropped.emit(data);
return false;
})
}
当我放到同一个元素时,只有droppable指令被触发。当我将元素放在另一个元素textarea上时,我想触发droppable指令。怎么做??