Events with Custom Element

[jawa-the-hutt]

I couldn't tell from the documentation if there is a way to handle Dragula events with the Custom Element. Is there a way?

Didn't look like there was, but wanted to double check before I investigate my options.

[michaelmalonenz]

No, there isn't a way to handle events directly, using the custom element.

The custom element is attempting to be a wrapper around the library, which provides some hook points to the most common actions. Given that there is something you want that it doesn't handle, can you give me an idea of your use case? Maybe there is something I could do to help?

The drag, drop, and dragEnd functions exposed on the custom element are hooked up to the corresponding events, which is what most people require.

[jawa-the-hutt]

A couple of possible use cases I was looking at for trying to use the over and out events. I'd like to see if it was possible to get the same type of effect you see here: http://stevendwood.github.io/html5-dropzone/examples/sortable-list.html when dragging items. Effectively, getting an outlined area that guides you on where to insert/drop the item.

The second use case would be the ability to nest droppable containers. For example, I have a container of draggable items that I want to drop into a container that is marked droppable. However, one of the items in the draggable container is capable of being made a droppable container once it's dropped. So, in theory, once it's dropped, I could then choose to drop other items in it, or outside of it in its parent container that was the original droppable container.

In essence, I'm trying to use dragula to be able to do sortable lists much like SortableJS. However to date, there are a bunch of challenges with using SortableJS with Aurelia, even with the aurelia-sortablejs plugin, due to how much DOM manipulation goes on.

[michaelmalonenz]

Sorry for going quiet on you - the company I work for went broke, and we had a major earthquake so I've been a little pre-occupied.

Those things have been sorted out, so I'll endeavour to get you a working solution soon.

Thanks for your patience,

Michael

[jawa-the-hutt]

Hey, no problem. Those kinds of things are way, way more important than this. Thanks for checking in and letting me know what's going on. For the stuff I'm working on right now, I'm good.

[michaelmalonenz]

I've added the function bindings to the custom element in v1.3.0 but haven't included any docs. I'll get around to it eventually, once I have some more spoons.

[avrahamcool]

@michaelmalonenz can you give us a hint on how to hook events with the custom elements?

[michaelmalonenz]

@avrahamcool the events are currently defined as callbacks on dragula-and-drop such as the dropFn binding. This is the example in the docs: view.html

<template>
  <dragula-and-drop drop-fn.call="itemDropped(item, target, source, sibling, itemVM, siblingVM)"></dragula-and-drop>
  <div class="drag-source drop-target">
    <compose repeat.for="thing of things" view-model.bind="thing"></compose>
  </div>
</template>

viewmodel.js

export class ViewModel {

  constructor() {
    this.things = [];
  }

  itemDropped(item, target, source, sibling, itemVM, siblingVM) {
    //do things in here
  }
}

[avrahamcool]

I tried the same for other events like cancel and remove but it didn't work.

both approches didn't work <dragula-and-drop cancel-fn.call="canceled(item, container, source, itemVM)"></dragula-and-drop> <dragula-and-drop cancel.call="canceled(item, container, source, itemVM)"></dragula-and-drop>

[michaelmalonenz]

Cancel isn't an event and isn't exposed on the custom element - the custom element calls it for you, just before it calls back to your registered dropFn.

The 7 events supported are drag drop dragEnd cloned over out shadow

https://github.com/michaelmalonenz/aurelia-dragula/blob/master/src/dragula-and-drop.js#L22-L28

TBH, I think I need to either abandon or re-write aurelia-dragula. Because it's a port of a library that didn't take the Aurelia lifecycle into account (because it wasn't written for Aurelia), so most of the issues I see (such as this one) is because you need to be intimately aware of the inner workings of dragula and aurelia before you can use <dragula-and-drop> which was intended to be a friendly interface.

[avrahamcool]

cancel is listed under events in the doc.

item was being dragged but it got nowhere and went back into container, its last stable parent; item originally came from source

I understand it's not bindable via the custom element, can you elaborate on how to use aurelia-dragula without the custom element? I found

let options = new Options();
let dragula = new Dragula(options);

but how am I telling my elements to use this newly created Dragula instance? just creating it should kick everything in place? (should I create it and immediately bind drag event for it to work?)

[michaelmalonenz]

@avrahamcool This is not recommended and I implore you to try using the custom element first. If you really need to cancel, you could just do nothing in the drop callback.

Otherwise, the example code for how to use a Dragula instance without dragula-and-drop is the dragula-and-drop implementation.

but how am I telling my elements to use this newly created Dragula instance?

The custom element uses css selectors to hook to the isContainer function, which changes depending on whether isDragging is set, to decide if it is a source container or target.