Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | 1x 1x 3x 1x | //import mergeStyles from "../../../helpers/mergeStyles";
import { CustomElementPropertyMetadata } from "../../../interfaces";
//import styles from "./DroppableMixin.css";
/**
* Allows a component to be selected when clicked
*/
const DroppableMixin = Base =>
class Droppable extends Base {
// static get styles(): string {
// return mergeStyles(super.styles, styles);
// }
static get properties(): Record<string, CustomElementPropertyMetadata> {
return {
/**
* Logic to accept a drop
*/
accept: {
type: Function,
defer: true, // Store the function itself instead of executing it to get its return value when initializing the property
required: true
},
/**
* Logic to execute on drop
*/
onDrop: {
attribute: 'on-drop',
type: Function,
defer: true, // Store the function itself instead of executing it to get its return value when initializing the property
required: true
}
};
}
// constructor() {
// super();
// this.toggleDroppable = this.toggleDroppable.bind(this);
// }
connectedCallback() {
super.connectedCallback?.();
this.addEventListener('dragover', this.handleDragOver);
this.addEventListener('drop', this.handleDrop);
}
disconnectedCallback() {
super.disconnectedCallback?.();
this.removeEventListener('dragover', this.handleDragOver);
this.removeEventListener('drop', this.handleDrop);
}
handleDragOver(e: DragEvent): void {
e.preventDefault();
}
handleDrop(e: DragEvent): void {
const data = JSON.parse(e.dataTransfer.getData('application/json'));
if (this.accept(data)) {
e.preventDefault();
this.onDrop(e.target, data);
}
}
};
export default DroppableMixin; |