kalcifer/ember-dragula

Simple drag and drop with dragula and ember

Ember Dragula

An ember-cli addon for using Dragula - A drag and drop library.

How to use

Install

Inside an ember-cli project, run:

ember install ember-dragula

This will install ember-dragula and dragula and wire everything up for you. Now you have two components available: {{ember-dragula}} and {{ember-dragula-container}}.

Example

{{#ember-dragula config=dragulaconfig}}
	{{#ember-dragula-container }}
		<div>drag me</div>
		<div>or me</div>
	{{/ember-dragula-container}}
	{{#ember-dragula-container }}
		<div>you can also drag me</div>
		<div>and me</div>
	{{/ember-dragula-container}}
{{/ember-dragula}}

Dragula will allow the user to drag any direct child element of a {{ember-dragula-container}}. {{ember-dragula}} is the component that manages the lifecycle of the associated drake and should always wrap around your containers in the template.

Passing options

In the above code snippet, the config parameter must be set in the following format on a parent controller/component.

dragulaconfig: {
	options: {
		copy: false,           
		revertOnSpill: false,  
		removeOnSpill: false
		// Other options from the dragula source page.
	},
	enabledEvents: ['drag', 'drop']
}

Using events

You can enable any of the default Dragula events in the config as seen above. When they're enabled, you still need to define corresponding actions on your parent controller/component:

{{#ember-dragula config=dragulaconfig drag='onDrag' drop='onDrop'}}
	{{#ember-dragula-container }}
		<div>drag me</div>
		<div>or me</div>
	{{/ember-dragula-container}}
{{/ember-dragula}}

Advanced usage

If you can not nest the markup directly, you can pass the drake instance down directly:

{{#ember-dragula config=dragulaconfig as |drake|}}
	<div>
		{{#ember-dragula-container drake=drake}}
			<div>drag me</div>
			<div>or me</div>
		{{/ember-dragula-container}}
	</div>
{{/ember-dragula}}

Installation

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit https://ember-cli.com/.

ember-dragula's Issues

Nested components conflict with parent view

Hi, since ember-dragula-container relies on this.get('parentView') you currently can not have nested components.

Here's an example of what I'd like to achieve:

{{#ember-dragula config=dragulaconfig dragulaEvent='dragulaEvent'}}
    {{#each model.columns as |column|}}
        {{#my-column column=column}}

            {{#each column.row as |row|}}
                {{#ember-dragula-container}}
                    {{my-row row=row}}
                {{/ember-dragula-container}}
            {{/each}}

        {{/my-column}}
    {{/each}}
{{/ember-dragula}}

I want to be able to drag the my-row component between my-column components. How would you do that? One idea would be to pass the drake instance from ember-dragula to ember-dragula-container directly if no parentView is defined.

blank config doesn't work

The ember-dragula component is using this.config.options instead of this.get('config.options'), so it will error out if you don't pass config. Makes it difficult for those who want to try out the project to quickly see the drag capabilities in their project without committing to it or figuring out why it doesn't render.

Upgrade readme with how to run the dummy app.

Can not drop nested items

Hello, I have this markup:
http://pastebin.com/JUDhptVv
I use "ember-dragula": "1.9.3",
I can drop items in parent container, but I can't items in child container. What's wrong, how I can do it?

Thanks.

Integrating with ember-cli

Is this supposed to work with ember-cli? Or are there additional instructions that are not included here? I've been wracking my brain trying to get this work with my ember-cli project and so far I have a headache :( I'm new to ember-cli and addons so it could very well be that I am misunderstanding the instructions.

Load dragula from NPM instead of Bower

As bower is being phased out of ember-cli we should move the dragula dependency to NPM. And make sure it is not loaded in Fastboot environments.

Play with components

Hi,

I want to use ember-dragula in a project.

But, I use dragula to copy element from a deck to a workbench.
Each element is an ember component and deal with own actions.

Unfortunatly, dragula copy all the DOM without the component logic.
When I call an action from a component inside the workbench, the component emitter is finally the deck one.

So, How can I use ember-dragula to create an unique component after copying ?

Thanks for advance,

bower dependency not included

Using ember cli 2.3.0.beta2, ember install ember-dragula does not include the dragula library in the bower_components library. I have to manually bower install --save dragula to make it work.

Is that usual, or should the addon do the necessary thing to update my app's bower.json and install dragula by its own ?

Fastboot compatibility is still an issue

Getting the following error compiling my app with ember-dragula using Ember 2.12 and the latest version of Fastboot.

ReferenceError: document is not defined

It looks like this is the offending code, but I don't see anything like it in the repo:

module.exports = useNative() ? NativeCustomEvent :

// IE >= 9
'function' === typeof document.createEvent ? function CustomEvent (type, params) {
  var e = document.createEvent('CustomEvent');
  if (params) {
    e.initCustomEvent(type, params.bubbles, params.cancelable, params.detail);
  } else {
    e.initCustomEvent(type, false, false, void 0);
  }
  return e;
} :

Dragging between lists? Nested lists? Wanna build a sortable tree

Here's a prototype I built long ago with jQuery UI Sortable: http://hivemindunit.github.io/hivemind-frontend-prototype/settings/domains/categories2/

I'm now trying to do an identical tree with Ember, and turns out to be a tough nut to crack due to the lack of high-level drag-n-drop abstractions. :(

Is ember-dragula able to power a sortable tree like that?

Problems with Ember 2.10

I've just updated my project to the latest version of Ember.js (2.10.0) which comes with Glimmer 2 enabled by default and I'm getting multiple errors when I try to drag and drop my elements. They come in three types:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

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.

Uncaught Error: Cannot call next() on an empty iterator

With the previous version of Ember I was using, 2.8.0 it was working just fine.

Any thoughts on that?

Publish the latest to npm

Hi! It's a great addon, thanks!

At this moment the latest published version on ember-dragula is 1.9.3.
In the master it doesn't depend on bower anymore. It would be great to have a published release with this feature.

In our project ember-dragula is the last bower addicted dependency 😆

Deprecation with using component lifecycle hook arguments

There is a new deprecation in using component lifecycle hook arguments:

https://emberjs.com/deprecations/v2.x/#toc_arguments-in-component-lifecycle-hooks

As far as I can tell, the only issue is in

https://github.com/kalcifer/ember-dragula/blob/master/addon/components/ember-dragula-container.js#L11

This should be rewritten to either not use oldAttrs at all, or arguments should be deconstructed to get the value of oldAttrs.

Fix breaking changes in FastBoot 1.0

The current ember-cli-fastboot releases (1.0.0-rc.1 and above) introduce breaking changes. These will most likely break your current FastBoot implementation.

See ember-fastboot/ember-cli-fastboot#387 for more information and a guide on how to fix your addon. Also you may want to visit the -fastboot Slack channel to get help from other users.

Note: this issue has been created automatically, by searching for certain patterns in your code. If you think this has been falsely created, feel free to close!

Unable to set `mirrorContainer` option

Hello,
First of all, this a great library on top of dragula. thanks:). I found an issue while using this.

The mirrorContainer option is not taking any effect, since the dragula library initializes its options, way before the DOM element pointed to by mirrorContainer is available in the DOM.

Is this a bug? Any workarounds ?

npm version doesn't match repo

latest npm version is 1.6
package.json has 1.5

The Broccoli Plugin: [SourceMapConcat: Concat: Vendor /assets/vendor.js] failed

Using the latest version of ember-cli (2.4.2), a clean install on a newly generated project. When attempting to run ember serve I get the following:

Serving on http://localhost:4200/
The Broccoli Plugin: [SourceMapConcat: Concat: Vendor /assets/vendor.js] failed with:
Error: ENOENT: no such file or directory, stat '/Users/joe/Sites/labs/dragular/tmp/source_map_concat-input_base_path-OnNb5kIh.tmp/0/bower_components/dragula.js/dist/dragula.js'
    at Error (native)
    at Object.fs.statSync (fs.js:892:18)
    at ConcatWithMaps.keyForFile (/Users/joe/Sites/labs/dragular/node_modules/ember-cli/node_modules/broccoli-concat/node_modules/broccoli-caching-writer/index.js:90:20)
    at Array.map (native)
    at ConcatWithMaps.CachingWriter._conditionalBuild (/Users/joe/Sites/labs/dragular/node_modules/ember-cli/node_modules/broccoli-concat/node_modules/broccoli-caching-writer/index.js:112:65)
    at /Users/joe/Sites/labs/dragular/node_modules/ember-cli/node_modules/broccoli-concat/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/read_compat.js:61:34
    at lib$rsvp$$internal$$tryCatch (/Users/joe/Sites/labs/dragular/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/joe/Sites/labs/dragular/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (/Users/joe/Sites/labs/dragular/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (/Users/joe/Sites/labs/dragular/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1198:9)

The broccoli plugin was instantiated at:
    at ConcatWithMaps.Plugin (/Users/joe/Sites/labs/dragular/node_modules/ember-cli/node_modules/broccoli-concat/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31)
    at ConcatWithMaps.CachingWriter [as constructor] (/Users/joe/Sites/labs/dragular/node_modules/ember-cli/node_modules/broccoli-concat/node_modules/broccoli-caching-writer/index.js:21:10)
    at new ConcatWithMaps (/Users/joe/Sites/labs/dragular/node_modules/ember-cli/node_modules/broccoli-concat/concat.js:22:17)
    at module.exports (/Users/joe/Sites/labs/dragular/node_modules/ember-cli/node_modules/broccoli-concat/index.js:26:10)
    at EmberApp.concatFiles (/Users/joe/Sites/labs/dragular/node_modules/ember-cli/lib/broccoli/ember-app.js:329:10)
    at EmberApp.javascript (/Users/joe/Sites/labs/dragular/node_modules/ember-cli/lib/broccoli/ember-app.js:1190:12)
    at EmberApp.toArray (/Users/joe/Sites/labs/dragular/node_modules/ember-cli/lib/broccoli/ember-app.js:1542:10)
    at EmberApp.toTree (/Users/joe/Sites/labs/dragular/node_modules/ember-cli/lib/broccoli/ember-app.js:1564:30)
    at module.exports (/Users/joe/Sites/labs/dragular/ember-cli-build.js:23:14)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/joe/Sites/labs/dragular/node_modules/ember-cli/lib/models/builder.js:55:19)

Thanks in advance, and for all your work so far.