draggable

draggable copied to clipboard

Please use this template to help contributors get a detailed description of the issue or feature.

For support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

1. Apply either the bug or feature-request label

This is a bug report

2. Describe the bug or feature

This occurs when using a basic use case of the library e.g.

const draggable = new Draggable(myHTMLContainer, {
   draggable: '.my-draggable-annotation'
}

When using this I get the following error:

TypeError: allDraggableElements.slice is not a function
 at Draggable.getDraggableElementsForContainer 
....

Not sure if I am doing something wrong but this is the current code:

/**
   * Returns draggable elements for a given container, excluding the mirror and
   * original source element if present
   * @param {HTMLElement} container
   * @return {HTMLElement[]}
   */
  getDraggableElementsForContainer(container) {
    const allDraggableElements = container.querySelectorAll(this.options.draggable);

    return [...allDraggableElements].filter((childElement) => {
      return childElement !== this.originalSource && childElement !== this.mirror;
    });
  }

When inspecting, I have the correct elements in allDraggableElements but since this is a NodeList Object and the spread operation compiles to a .slice() which is not a function of NodeList, the code errors.

I have found that patching it slightly seems to fix the issue. This forces the NodeList to be converted to an array.

/**
  * Returns draggable elements for a given container, excluding the mirror and
  * original source element if present
  * @param {HTMLElement} container
  * @return {HTMLElement[]}
  */
 getDraggableElementsForContainer(container) {
   const allDraggableElements = [].slice.call(container.querySelectorAll(this.options.draggable));

   return [...allDraggableElements].filter(childElement => {
     return childElement !== this.originalSource && childElement !== this.mirror;
   });
 }

Please let me know if you need further clarification or if I should make a PR for this. This is my first time using the library so it could be something I am doing wrong.

4. Please tell us about your environment:

• Library version: [1.0.0-beta.8 ]
• Browsers: [Chrome, maybe others]
• Tech stack: [TypeScript, ES6/7, .tsx (Stencil.js)]
• Other information: Stack Trace attached below

I have experienced this issue also and can confirm the suggested patch works.

@rodoch, what suggested patch?

The patch suggested by @miguelyoobic95 in his issue above:

I have found that patching it slightly seems to fix the issue. This forces the NodeList to be converted to an array.

/**
  * Returns draggable elements for a given container, excluding the mirror and
  * original source element if present
  * @param {HTMLElement} container
  * @return {HTMLElement[]}
  */
 getDraggableElementsForContainer(container) {
   const allDraggableElements = [].slice.call(container.querySelectorAll(this.options.draggable));

   return [...allDraggableElements].filter(childElement => {
     return childElement !== this.originalSource && childElement !== this.mirror;
   });
 }