michaelmalonenz / aurelia-dragula Goto Github PK

I am always getting this null

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.

Hi!

I have a problem with dropping element, which is moved outside document body, for example to browser toolbar or page scroll area,

Steps to reproduce:

1. start dragging element
2. move mouse pointer to the most top of browser window
3. release mouse button

result: nothing happened, element is still bound to pointer
expected: element is released, "drop" or "cancel" event is called

I've noticed, that "mouseup" event listener is attached to document.body in Dragula.prototype._events method. But in bevacqua Dragula implementation event are attached to document.documentElement;
(please look at https://github.com/bevacqua/dragula/blob/master/dragula.js, function events)

Will you fix this issue, please?

revert-on-spill="false" evaluates to true because of the way Aurelia works. Probably want to sort that out.

In bundles.js I have to add:

    "aurelia-dragula",
    "aurelia-dragula/dragula.css!text",
    "aurelia-dragula/dragula-and-drop.html!text",
    "aurelia-dragula/dragula-and-drop.js"

for it to work with bundling and exporting.

Since it's an aurelia specific version of dragula it would be awesome if "aurelia-dragula" only would be sufficient.

I would like to use Aurelia-Dragula in an Aurelia project that uses webpack 4.

When I include the plugin like this:

.plugin(PLATFORM.moduleName('aurelia-dragula'))

the below error is thrown. Maybe there was a change to the way webpack 4 loads css files from webpack 3.

bluebird.js:1545 Unhandled rejection Error: Failed loading required CSS file: aurelia-dragula/dragula.css at fixupCSSUrls (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:9522:15) at https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:9560:20From previous event: at CSSResource.push../node_modules/aurelia-hot-module-reload/dist/native-modules/hmr-css-resource.js.CSSResource.load (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:9556:14) at ResourceDescription.load (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:34779:26) at ResourceModule.load (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:34728:37) at https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:35108:41From previous event: at ViewEngine.importViewResources (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:35077:50) at ViewEngine.loadTemplateResources (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:35047:17) at https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:34995:38From previous event: at ViewEngine.loadViewFactory (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:34977:65) at RelativeViewStrategy.loadViewFactory (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:32079:23) at HtmlBehaviorResource.load (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:35758:27) at ResourceDescription.load (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:34779:26) at ResourceModule.load (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:34721:23) at https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:35108:41From previous event: at ViewEngine.importViewResources (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:35077:50) at https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:91764:23From previous event: at loadResources (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:91755:7) at https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:91849:14 at next (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:91695:30) at runTasks (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:91701:10) at https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:92054:16From previous event: at https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:92053:21From previous event: at FrameworkConfiguration.apply (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:92037:42) at Aurelia.start (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:91581:37) at Module.configure (https://localhost:44325/dist/app.js?v=YmAkrVe0N9qN82A5ScsdXaLpZ-Euv3zzHbqT-qcyVys:1981:13) at https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:6067:27From previous event: at config (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:6062:54) at https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:6098:12From previous event: at bootstrap (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:6097:24) at https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:6084:7From previous event: at run (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:6079:59) at Module.<anonymous> (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:6104:16) at Module../node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js (https://localhost:44325/dist/vendor.js?v=9_aEVsAca6jwarzTPDp9i9FT4253bAhihdD63x0nqy4:6105:30) at __webpack_require__ (https://localhost:44325/dist/app.js?v=YmAkrVe0N9qN82A5ScsdXaLpZ-Euv3zzHbqT-qcyVys:783:30) at fn (https://localhost:44325/dist/app.js?v=YmAkrVe0N9qN82A5ScsdXaLpZ-Euv3zzHbqT-qcyVys:151:20) at Object.0 (https://localhost:44325/dist/app.js?v=YmAkrVe0N9qN82A5ScsdXaLpZ-Euv3zzHbqT-qcyVys:1165:18) at __webpack_require__ (https://localhost:44325/dist/app.js?v=YmAkrVe0N9qN82A5ScsdXaLpZ-Euv3zzHbqT-qcyVys:783:30) at checkDeferredModules (https://localhost:44325/dist/app.js?v=YmAkrVe0N9qN82A5ScsdXaLpZ-Euv3zzHbqT-qcyVys:46:23) at ./ClientApp/assets/css/index.css (https://localhost:44325/dist/app.js?v=YmAkrVe0N9qN82A5ScsdXaLpZ-Euv3zzHbqT-qcyVys:859:18) at https://localhost:44325/dist/app.js?v=YmAkrVe0N9qN82A5ScsdXaLpZ-Euv3zzHbqT-qcyVys:862:10

Thanks for creating this Aurelia plugin!

When configuring the plugin to use a function to determine whether or not to create a copy during a drag and drop operation, the plugin never calls the assigned function and behaves as if options.copy is set the the default of false.

aurelia.use
    .standardConfiguration()
        .developmentLogging()
      .plugin('aurelia-dragula', (options) => {
          //options.copy = true;
          options.copy = (el, source) => (source === $('#my-source'));
          options.accepts = (el, target) => (target !== $('#my-source'));
      })

Looking at your source, it appears that copy is being treated only as a Boolean:

  DragulaAndDrop.prototype._setupOptions = function _setupOptions() {
      var result = {
        containers: this._getOption('containers'),
       ** copy: this._getOption('copy'),**
        copySortSource: this._getOption('copySortSource'),
        revertOnSpill: this._getOption('revertOnSpill'),
        removeOnSpill: this._getOption('removeOnSpill'),
        direction: this._getOption('direction'),
        ignoreInputTextSelection: this._getOption('ignoreInputTextSelection'),
        mirrorContainer: this._getOption('mirrorContainer')
      };
      return result;
    };

By default, Dragula does not allow sorting when copy is set to true. Being able to use a function allows for sorting of copied items in the drop target container.

An example of setting up the copy option looks like this (taken from the Dragula documentation)

dragula([document.getElementById(left), document.getElementById(right)], {
  copy: function (el, source) {
    return source === document.getElementById(left)
  },
  accepts: function (el, target) {
    return target !== document.getElementById(left)
  }
});

I'm submitting a bug report

Current behavior
Using aurelia.use.plugin('aurelia-dragula'); in main.js - export function configure(aurelia) {} will not work with the new aurelia-webpack-plugin v2 (currently 2.0.0-rc.2).

Expected behavior Be able to load aurelia-dragula plugin without issues under aurelia-webpack-plugin v2.

Minimal reproduction of the problem with instructions
Please download minimal Aurelia + Webpack setup from here. Then do the following simple steps.

npm install --save aurelia-dragula

import {PLATFORM} from 'aurelia-framework';
export function configure(aurelia) {
  aurelia.use
     .standardConfiguration()
     .plugin(PLATFORM.moduleName('aurelia-dragula')) // <--- wrapping in PLATFORM.moduleName()
     .developmentLogging();
  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

Under new aurelia-webpack-plugin it is required to wrap aurelia-dragula by PLATFORM.moduleName(). See more info about PLATFORM.moduleName().

However, the browser gives this error:
Uncaught (in promise) Error: Unable to find module with ID: aurelia-dragula/dragula-and-drop

I think internally, aurelia-dragula should load all sub-modules using PLATFORM.moduleName()

Reason for this issue
As aurelia-webpack-plugin is upgrading to v2 (currently 2.0.0-rc.2), aurelia-dragula will fail to load on webpack setups.

My environment: Windows, VS Code, Webpack, Webpack Dev Server

aurelia-dragula version: 1.3.3

Note: I tried to use the following as a temporary solution in webpack.config.js:

const AureliaWebpackPlugin = require('aurelia-webpack-plugin');
...
// under .plugins: []  section
new AureliaWebpackPlugin.ModuleDependenciesPlugin({
    'aurelia-dragula': ['./dragula-and-drop'] // temp HACK
}),

But this also raised an error in the browser:

Uncaught (in promise) Error: Failed loading required CSS file: aurelia-dragula/dragula.css

@jods4 any idea how to get dragula.css loaded by ModuleDependenciesPlugin?

Despite the code of conduct exercised in conversations with contributors to this project (ref your response to my reported case #57), I would like to report that gulp build fails with current node LTS (>=12.x).

Reference: https://stackoverflow.com/questions/55921442/how-to-fix-referenceerror-primordials-is-not-defined-in-node

According to this article the best solution is to upgrade to gulp 4.

Would like to improve the performance of drag - it is noticably slow. Should be able to throttle the number of style updates on mouse move as some low-hanging fruit.

A few functions declared in the TypeScript typings file cause compile errors since return type is missing.

Should be a quite quick fix.

Any chance there is support for dragging multiple items? I looked through your docs, but I don't see anything.

To give a little context, I have a table with <tr> items that are draggable. I have a tr repeater that is record in data and am toggling record.isSelected with CMD + click fn. So I was hoping once I've selected the records I want to drag, I would click one of the selected and drag and ALL the selected records would move.

Anyways, great work. From what I've seen playing around with your plugin, it's really easy to use. Thanks!

@n2liquid Yeah, I gave up on the idea - it didn't get merged (as you might have noticed), but I liked the library enough to port it to Aurelia, as you might see here.

I've got this plugin working using your <dragula-and-drop> custom element, however I want to more specifically control what items are dragabble by using the isContainer option.

Unfortunately though I cannot get the plugin to work using the following setup;

let options = new Options();
    options.isContainer = function (el) {
      return el.classList.contains('program-link');
    };
let dragula = new Dragula(containers, options);

Thanks for this plugin, it significantly simplifies using dragula with aurelia!

One problem I've noticed is that when using JSPM/SystemJS and the aurelia bundler, the jspm_packages/npm/[email protected]/dragula-and-drop.js file is not getting bundled.

Have you seen this before or is it something to with my setup?

First of all, thank you for this great plugin.

My problem is, I can't get the options to work locally.
Probably I'm just missing something or doing something wrong because setting the options globally works fine.

What I have is this:
It's a simple sortable list, the first item should be fixed in it's position, only the other items should be able to be moved.

sandbox.html:

<template>
        <dragula-and-drop drop-fn.call="itemDropped(item, target, source, sibling)"></dragula-and-drop>
        <ul class="list-group drag-source drop-target" id="list">
            <li repeat.for="i of items" class="list-group-item" fixed.bind="$first">
                <span class="${ $first ? 'fa fa-bullseye' : 'ao-draggable fa fa-arrows'}"></span> ${i}
            </li>
        </ul>
</template>

sandbox.js:

import {Dragula, Options} from 'aurelia-dragula';

export class Sandbox {

    items = ["Anton", "Berti", "Conny", "Det", "Edi", "Fritzchen"];

    bind() {
        let options = new Options();
        options.invalid = (el, handle) => {
            return el.fixed;
        }

        let dragula = new Dragula(options);
    }

    itemDropped(item, target, source, sibling) {
        // do something
    }
}

Could you have a look at this, please? My invalid-function seems to work, it looks like it's just not connected to the drag-and-drop-list.
What is the best step of the aurelia lifecycle to set the options? (I tried some other one, none worked.)

Installed aurelia-dragula via npm (using Webpack and Aurelia) and I'm getting the following error in the console: Unhandled rejection Error: Cannot find module './aurelia-dragula/dragula-and-drop'. In the view model module that I'm using the library, I'm importing and instantiating the library as follows:

import {Dragula} from 'aurelia-dragula';

let dragula = new Dragula();

• They're misleading (several people try to create their own instance of Dragula even though they're using the custom element)
• They look ugly on GitHub
• They could do with being less verbose and more precise

Hi ,

I'm creating a new project of Aurelia with the CLI tool (au new) with typescript template.
I installed aurelia-dragula with npm and start using it in my typescript files.
When I run "au run --watch" , I get an error " [Error: ENOENT: no such file or directory, open 'C:\temp\client\src\dragula.js']"
If I open my ts file , I have a problem with the import statement "import {dragula} from 'dragula';"
Module ''dragula'' has no exported member dragula

Any idea please ? Did you use this plugin with the new Aurelia CLI project .

Thanks in advance ...

As already mentioned in my comment I was running into issues with plain Dragula which caused the drop and dragend events to be emitted before all DOM changes were completed, making it impossible to keep track of the order they were in. I replaced the module with aurelia-dragula and was hoping it would fix it, but apparently it didn't completely. I am still getting an incorrect order sometimes, but even less than with plain Dragula. The most frustrating part is that I have no idea how to reproduce it and thus what the root cause of this issue is.
Hope you might be able to help me in some way.

drop(item, target, source, sibling, itemVM, siblingVM) {
    let siblingResource = siblingVM ? siblingVM.resource : null;
    moveBefore(this.resourceOrder, resource => resource === itemVM.resource, resource => resource === siblingResource);
}

<dragula-and-drop drop-fn.call="drop(item, target, source, sibling, itemVM, siblingVM)"></dragula-and-drop>
<ul class="drop-target drag-source}">
    <li repeat.for="resource of resourceOrder" resource.bind="resource">${resource}</li>
</ul>

Some sidenotes that may be interesting:

• revertOnSpill is enabled (#44)
• direction is vertical (default)

This was a bug added as a side-effect of v1.6.0 when we started reverting the element position based on the sibling being a comment node (i.e. it was dropped at the end of a container). However, if the target is empty and is different from the source, then this is probably not the right behaviour.

Issue can be reproduced on code from https://github.com/michaelmalonenz/aurelia-dragula-example.

Steps to reproduce:

1. Open http://localhost:9000/#/multiarray on IE 11
2. Drag element (e.g 1 from array A)
3. Start dragging
4. Text is selected all over the page.
5. Even when you drop item cursor is still active and select text. You have to click again to disable that.

On chrome it works fine.

Thanks for solving that

Example case here: https://github.com/Askadar/planner, left pane with todos, most related stuff in src/todos.
The problem - on dropping <li> element somewhere in list there's noticeble flicker. It looks like dragula does the reorder and shows new correct list, then aurelia catchs up and re-renders old list, then gets updated one from dragula and re-renders it again, final correct one.
I suppose this have something to do with either aurelia and dragula not communicating properly or me screwing something up installing and configurating stuff (it's my first app in aurelia basically, so I still get to know stuff).

in:
<dragula-and-drop drop.call="itemDropped(item, target, source, sibling)"></dragula-and-drop>

drop.call should be drop-fn.call

<dragula-and-drop drop-fn.call="itemDropped(item, target, source, sibling)"></dragula-and-drop>

Using your example project: https://github.com/michaelmalonenz/aurelia-dragula-example

1. Add a breakpoint, console log, or anything else to notify you (that it has been triggered) on line 32 in welcome.js (so just inside the drop function)
2. Start it up and submit the name: "test"
3. Note that the repeater DOM ends with a <!--anchor--> node (after the last <compose> element)
4. Move the last (right) letter, but do not actually change its position in the list. Just drag it, move it a px or 2 to initiate the drag and release it again.

The drop event should now have fired! Like I said this is because the _initialSibling is set to the <!--anchor--> from step 3 which is then compared to the _currentSibling which is set to null. They are obviously not equal, triggering the drop event.

On beforehand I want to say that I have asked this question on stackoverflow and was asked to try here.

I want to be able to set revertOnSpill and removeOnSpill on only specific elements and in dragula(JS?) you're able to do something like this to create settings based on specific elements:

dragula([document.getElementById(left), document.getElementById(right)], { copy: function (el, source) { return source === document.getElementById(left) }, accepts: function (el, target) { return target !== document.getElementById(left) } });

According to the documentation I don't see a way to configure this as it isn't a function with element parameter.

Stackoverflow: https://stackoverflow.com/questions/54573862/how-to-set-container-specific-options-in-aurelia-dragula

Hi, This is a nice aurelia plugin. I installed and works fine but a tried to make a new Aurelia CLI project and I can not get it working. An Aurelia CLI Project Sample will be greate.

Hey guys,

I've just occurred that bug. When I start dragging element and it disappear from the DOM (dynamically) when you attempt to drop the element the following error occurs:

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at Dragula.cancel
    at DragulaAndDrop._dropFunction
    at Array.forEach (native)
    at Emitter.emit
    at Dragula.drop
    at Dragula._release

I'm using the "dragula-and-drop" custom element. Is there a temporary workaround which you can think of? And can you please look at the issue?

Regards,
Liliyan

I noticed that with every drop any where, the drag-end callback function is called twice. The first time before the drop event with the correct (item, itemVM) data, the second time with always the same data (null, null).

So the first call is too early with the correct data, the second call is at the right time but with the wrong data.

Upstream, dragula makes changes to the DOM when it begins dragging, and that doesn't play nicely with Aurelia. I would like to just make it item.style['visibility'] = 'invisible';

I have an element that I want to drag. When I drop, a drop event is fired in dragula-provider.js. If I am not using DraculaModel, the method returns which is fine. If I am using dragulaModel, the following line is executed:

Target.removeChild(dropElm); // element must be remove for ngFor to apply correctly

This causes problems as it assumes that the element being dropped is already in the targets model which it may not be. Imagine you want to drag between components or between bags.

Error: DOMException: failed to execute 'removeChild' no 'Node'. The node to be removed is not a child of this node

In the example app, I have used show instead of if because it can't rebind correctly - this is particularly troublesome when navigating away and back to a particular ViewModel (as VMs are singletons by default)

I'm trying to use aurelia-dragula in our project but getting:
system.js:4 GET http://localhost/WPL/jspm_packages/npm/[email protected]/dragula.css.js 404 (Not Found)
so it appends '.js' to css file.

How I get rid of this?

Don't know if it's supposed to work this way, but the drop-fn is also called on drag, not only on drop which, for me is a real hazzle to work around.

I apologize if this comes across the internet as being aggressive, or disrespectful of the large amount of code you've produced for free, but I'm feeling frustrated after trying for a few hours to fully use the potential of the aurelia-dragula project, in combination with webpack and typescript.

I would like to specify a custom function for containers, which is supported by the dragula object. However, I cannot seem to get it to work in my typescript code. You mention somewhere that it's incorrect to use both the html component and the js code at the same time (which is currently my code), but the error I'm getting from typescript implies that 'Dragula is a type, not instantiable', not something related to using the component. I am confused as to how I should get this object, as the documentation is not clear, nor is the example project, on this matter.

I have an application that displays list of items. When I dragging an item along the list, the UI shows the item moved to corresponding place in the list. Then I drop the item and "drop-fn" method handles the view model.

My problem is that target passed to drop-fn is not consistent: sometimes it is item before the dropped location and sometimes item after the location. Therefore I cannot handle list reorder.

Using your example project: https://github.com/michaelmalonenz/aurelia-dragula-example

1. Add a breakpoint, console log, or anything else to notify you (that it has been triggered) on line 32 in welcome.js (so just inside the drop function)
2. Start it up and submit the name: "test"
3. For reference move first letter to any position and note that when dropped, the breakpoint should stop execution. The letter should be changed to the position you dropped it.
4. Now move the last (right) letter and change its position in the list to any other position. Note that when the breakpoint stops execution, the letter should have returned to its previous position (completely right). When you continue execution the letter should move to its new position.

Thanks for an awesome plugin for Aurelia! Could we get a tiny example on how to use it?

To make sure we use it as intended.

I've just installed aurelia-dragula (version 1.2.0).

After adding aurelia.use.plugin("aurelia-dragula") to main.js I started my app but I get the following error:

/jspm_packages/npm/[email protected]/dragula.css!http://localhost:49849/dist/css.js as 
"./dragula.css!css" from http://localhost:49849/jspm_packages/npm/[email protected]/dragula-and-drop.js

and the application stops loading.

It looks like it tries to load dragula.css from the wrong location. Any suggestions?

I'm trying to reorder trs in a table, but the tr always gets reverted to the original position when I drop it.

This is my tbody definition:

<tbody class="drag-source drop-target">
    <tr repeat.for="activity of selectedActivities">
        <td>${activity.name}</td>
        <td>?</td>
        <td>${activity.group}</td>
        <td>${activity.dayOfTheWeek}</td>
        <td></td>
        <td>${$index+1}</td>
        <td><span class="glyphicon glyphicon-sort"></span></td>
    </tr>
</tbody>

I decided to try with divs, and without a repeat.for:

<div class="drag-source drop-target">
                    <div style="padding: 5px; background-color: #ddd">
                        <div style="display: inline-block;">One</div>
                    </div>
                    <div style="padding: 5px; background-color: #ddd">
                        <div style="display: inline-block;">Two</div>
                    </div>
                    <div style="padding: 5px; background-color: #ddd">
                        <div style="display: inline-block;">Three</div>
                    </div>
                </div>

But I have exactly the same problem. I'm using the default initialization of the custom element:

<dragula-and-drop drop-fn.call="activityDropped(item, target, source, sibling, itemVM, siblingVM)"></dragula-and-drop>

So, whatever I do, I can drag, but I can't reorder. Am I missing an option necessary to be able to drop in the same container from where I drag?