drag and drop improvements (copy effect) (#6019)

* drag and drop fixes (copy effect)

* fix tests

* update tests

* test fixes
This commit is contained in:
Denys Vuika
2020-08-18 10:57:09 +01:00
committed by GitHub
parent 16d9d9e356
commit d355f76499
3 changed files with 36 additions and 26 deletions

View File

@@ -39,26 +39,26 @@ describe('UploadDirective', () => {
it('should update drag status on dragenter', () => {
expect(directive.isDragging).toBeFalsy();
directive.enabled = true;
directive.onDragEnter();
directive.onDragEnter(new DragEvent('dragenter', { dataTransfer: new DataTransfer() }));
expect(directive.isDragging).toBeTruthy();
});
it('should not update drag status on dragenter when disabled', () => {
expect(directive.isDragging).toBeFalsy();
directive.enabled = false;
directive.onDragEnter();
directive.onDragEnter(new DragEvent('dragenter'));
expect(directive.isDragging).toBeFalsy();
});
it('should update drag status on dragover', () => {
expect(directive.isDragging).toBeFalsy();
directive.enabled = true;
directive.onDragOver(new CustomEvent('dragover'));
directive.onDragOver(new DragEvent('dragover', { dataTransfer: new DataTransfer() }));
expect(directive.isDragging).toBeTruthy();
});
it('should prevent default event on dragover', () => {
const event = new Event('dom-event');
const event = new DragEvent('dragover', { dataTransfer: new DataTransfer() });
spyOn(event, 'preventDefault').and.stub();
directive.enabled = true;
directive.onDragOver(event);
@@ -69,7 +69,7 @@ describe('UploadDirective', () => {
it('should not update drag status on dragover when disabled', () => {
expect(directive.isDragging).toBeFalsy();
directive.enabled = false;
directive.onDragOver(new CustomEvent('dragover'));
directive.onDragOver(new DragEvent('dragover'));
});
it('should update drag status on dragleave', () => {

View File

@@ -108,16 +108,18 @@ export class UploadDirective implements OnInit, OnDestroy {
}
}
onDragEnter() {
onDragEnter(event: DragEvent) {
if (this.isDropMode()) {
event.dataTransfer.dropEffect = 'copy';
this.element.classList.add(this.cssClassName);
this.isDragging = true;
}
}
onDragOver(event: Event) {
onDragOver(event: DragEvent) {
event.preventDefault();
if (this.isDropMode()) {
event.dataTransfer.dropEffect = 'copy';
this.element.classList.add(this.cssClassName);
this.isDragging = true;
}