diff --git a/index.d.ts b/index.d.ts index 6f8e66b..350ca51 100644 --- a/index.d.ts +++ b/index.d.ts @@ -577,7 +577,9 @@ export type WindowAttributes = { /** * If window should have the default drop action */ - droppable?: boolean; + droppable?: boolean | { + dataTransferProperty?: 'files' | 'items'; + }; /** * Minimum dimension */ diff --git a/src/utils/dnd.js b/src/utils/dnd.js index b195eea..0178de8 100644 --- a/src/utils/dnd.js +++ b/src/utils/dnd.js @@ -90,13 +90,13 @@ const retval = (fn, ...args) => { return true; }; -const getDataTransfer = (ev, type) => { +const getDataTransfer = (ev, type, dataTransferProperty) => { let files = []; let data; if (ev.dataTransfer) { - files = ev.dataTransfer.files - ? Array.from(ev.dataTransfer.files) + files = ev.dataTransfer[dataTransferProperty] + ? Array.from(ev.dataTransfer[dataTransferProperty]) : []; try { @@ -200,9 +200,10 @@ export const draggable = (el, options = {}) => { * @return {DroppableInstance} */ export const droppable = (el, options = {}) => { - const {strict, type, effect, ondragenter, ondragover, ondragleave, ondrop} = { + const {strict, type, effect, dataTransferProperty, ondragenter, ondragover, ondragleave, ondrop} = { type: 'application/json', effect: 'move', + dataTransferProperty: 'files', ondragenter: () => true, ondragover: () => true, ondragleave: () => true, @@ -241,7 +242,7 @@ export const droppable = (el, options = {}) => { return false; } - const {files, data} = getDataTransfer(ev, type); + const {files, data} = getDataTransfer(ev, type, dataTransferProperty); ev.stopPropagation(); ev.preventDefault(); diff --git a/src/window.js b/src/window.js index 98b8248..fc1fc2b 100644 --- a/src/window.js +++ b/src/window.js @@ -84,7 +84,7 @@ import logger from './logger'; * @property {boolean} [controls=true] Show controls * @property {string} [visibility=global] Global visibility, 'restricted' to hide from window lists etc. * @property {boolean} [clamp=true] Clamp the window position upon creation - * @property {boolean} [droppable=true] If window should have the default drop action + * @property {boolean | {dataTransferProperty?: 'files' | 'items'}} [droppable=true] If window should have the default drop action * @property {WindowDimension} [minDimension] Minimum dimension * @property {WindowDimension} [maxDimension] Maximum dimension * @property {{name: string}} [mediaQueries] A map of matchMedia to name @@ -454,11 +454,16 @@ export default class Window extends EventEmitter { // DnD functionality if (this.attributes.droppable) { + const {dataTransferProperty = 'files'} = this.attributes.droppable === true + ? {} + : this.attributes.droppable; + const d = droppable(this.$element, { ondragenter: (...args) => this.emit('dragenter', ...args, this), ondragover: (...args) => this.emit('dragover', ...args, this), ondragleave: (...args) => this.emit('dragleave', ...args, this), - ondrop: (...args) => this.emit('drop', ...args, this) + ondrop: (...args) => this.emit('drop', ...args, this), + dataTransferProperty, }); this.on('destroy', () => d.destroy());