Draggable: Incorrect behavior with Droppable

[AStoker]

Repro fiddle: http://jsfiddle.net/theandybob/1L5s4k58/

When using Droppable, it seems that the elements themselves aren't dragged (they don't move on the screen as you're dragging about), and when you release where you would normally drop, errors are thrown.

This seems to be related to how mirror is working.

During DragStart, these events are executed
Mirror is created:
https://github.com/Shopify/draggable/blob/1c21f18ca165383ca25ff96023de3a6583714fcb/src/Draggable/Draggable.js#L326

Mirror is appended to the container:
https://github.com/Shopify/draggable/blob/1c21f18ca165383ca25ff96023de3a6583714fcb/src/Draggable/Draggable.js#L345

Mirror is removed:
https://github.com/Shopify/draggable/blob/1c21f18ca165383ca25ff96023de3a6583714fcb/src/Draggable/Draggable.js#L384

Now that DragStart has executed, when we come to DragStop, where we are trying to remove the mirror from the DOM. Trouble is, we already removed it in the DragStart event. So when we call this.mirror.parentNode, we don't have a parent node to execute off of.
https://github.com/Shopify/draggable/blob/1c21f18ca165383ca25ff96023de3a6583714fcb/src/Draggable/Draggable.js#L561

This could full well be me doing something stupid, and if it is, I'd love to know how to fix this.

[tsov]

@AStoker thanks for reporting! This seems to be a documentation issue, but we should also provide better error messaging to avoid this issue.

Basically, when using Droppable, draggable elements need to be within a droppable container already, which includes a draggable-droppable--occupied class on the droppable container.

Currently droppable containers can only contain one draggable element, but there are plans to allow multiple draggable elements within a droppable container, via a capacity option.

I will keep this issue open until we have better documentation and better error handling for droppable. I was planning to do some code examples today, so I will make one for droppable too 👍

[AStoker]

Thanks @tsov, I guess I need to wait to see some examples to fully get what's going on.
In my use case, I am trying to create a drag and drop ui, with a toolbox on the left. So the elements on the toolbox should be draggable onto a workspace.
This means I don't want to move the actual element, but rather move a clone onto the workspace (and then have a drop event that determines what element from the toolbox was dragged, discard the clone, and create it's own element that's draggable inside the workspace).

Will this library support that kind of interaction? And if so, could you add to the documentation some examples of dragging a clone onto a drop zone without moving the original?

[tsov]

@AStoker Thanks for explaining your use-case 👍 I think you may be able to use Sortable for this, but it's missing a copy option. The copy option would copy the source element, when dragging into a different container. I will add it to our roadmap, and hopefully get it out for beta.4.

Otherwise you could also build on top of Draggable to really tailor your experience, something _along the lines of_:

class CustomSortable extends Draggable {
  constructor(...args) {
    super(...args);

    this.on('drag:over', this.onDragOver);
    this.on('drag:out', this.onDragOut);
  }

  onDragOver({source, over}) {
    const isOutsideContainer = (source.parentNode !== over.parentNode);
    if (/* some check */ && isOutsideContainer) {
      // clones and inserts into new container
      this.clonedSource = dragEvent.source.cloneNode(true)
      over.insertBefore(over, this.clonedSource);
    }
  }

  onDragOut({source, over}) {
    if (this.clonedSource) {
      // removes cloned source when leaving
      this.clonedSource.parentNode.removeChild(this.clonedSource);
      this.clonedSource = null;
    }
  }
}

(Code has not been tested, just an idea)

[AStoker]

Ohhh, I didn't consider building on top of Draggable that way, that's kind of awesome. Thanks for the idea, I'll give it a shot!

[tsov]

@AStoker glad to have helped! Yes, the documentation is still very poor, we want to encourage people to build on top of Draggable for their custom drag and drop experience, if Sortable, Swappable or Droppable don't give you what you need.

Let me know how it's going 👍 In the meantime we'll add the copy option for Sortable

[beefchimi]

I am going to go ahead and close this issue.I believe the Unique Dropzone Example is sufficient in demonstrating Droppable's purpose.

We are also actively working on improving documentation. That can be tracked as its own project.

[Feaman]

Unique Dropzone Example your example is frustrating. It haven't html, but some kind of view template.