Unable to set `mirrorContainer` option

[shankarsridhar]

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 ?

[pksjce]

Hi,

I was able to use the mirrorcontainer option pretty easily. I have updated the example at https://github.com/kalcifer/ember-dragula/tree/master/tests/dummy for your convenience. Closing this issue.

[shankarsridhar]

Hi @pksjce Thanks for the example. But there is a problem with my use case.

_Long version_ Unlike your example, in my use case, the mirrorContainer node is not available in the DOM, at the time dragula initializes its dragulaConfig/options and hence mirrorContainer is initialized as null.

Your example has an element that is available when the index.html loads. But In my use case, the HTML element that I want to use as mirrorContainer element (will be loaded in a separate route inside a child component and) is available in the DOM only after the dragula is initialized.

_Short version:_ Is there a way to delay or re-initialize dragula, so that the options are reloaded after the element that I want to use as mirrorContainer is actually available in the DOM.

[pksjce]

So, The drake instance is available to you in the addon component. If you extend it, you will get access to this instance. Now, you can set any new parameter on the instance for your use.

Regards, Pavithra.K

On Thu, Mar 10, 2016 at 11:09 AM, Shankar Sridhar notifications@github.com wrote:

Hi @pksjce https://github.com/pksjce Thanks for the example.

Long version Unlike your example, in my use case, the mirrorContainer node is not available in the DOM, at the time dragula initializes its dragulaConfig/options and hence mirrorContainer is initialized as null.

Your example has an element that is available when the index.html loads. But In my use case, the HTML element that I want to use as mirrorContainer element (will be loaded in a separate route inside a child component and) is available in the DOM only after the dragula is initialized.

Short version: Is there a way to delay or re-initialize dragula, so that the options are reloaded after the element that I want to use as mirrorContainer is actually available in the DOM.

— Reply to this email directly or view it on GitHub https://github.com/kalcifer/ember-dragula/issues/14#issuecomment-194682414 .

[shankarsridhar]

Hey Pavithra @pksjce... Thanks a lot for the help. Really appreciate it :+1:

[kirstenfrager]

is anyone able to elaborate on the above? I am trying to use dragula in ionic and have it all working but am facing the same issue as listed here. i am not sure how to write the drake instance and implement that (new to ionic and coding). if anyone can paste something, would be great!

[ngrealish]

@shankarsridhar, Would you mind sharing your workaround?

[shankarsridhar]

@ngrealish, The main idea is to recreate the DOM elements inside some life cycle hook, so that you have a valid reference to those DOM elements. I stored the selectors for all the draggable containers/elements and then recreated those DOM elements, inside the render runloop, (u could use afterRender as well). This way the references are actually valid and not pointers to old DOM elements that were removed from DOM before the rerender.

some snippets:

Ember.run.schedule('render', this, function() {

      let drake = window.dragula([], this.get('dragulaConfig'));
      drake.containers = this.getDraggableContainers();

      drake.on('drag', (el, source, event) => {
            this.send('onDrag', event);
          })
          .on('cloned', (clone, original) => {
            this.send('onClone', clone, original);
          })
          .on('drop', (el, target, source, sibling, event) => {
            this.send('onDrop', el, target, source, event);
          });

      this.setProperties({
        drake: drake,
        canvasNode: Ember.$('.main-draggable-area')
      });
    });

/**
   * @method: getDraggableContainers
   * Gets references to collection of DOM items that are supposed to be Draggable and droppable
   *
   * @returns {Array}
   */
  getDraggableContainers(){
    return [].concat(this.$('.entity-item-parent').toArray(), this.$('.route-plan-area').toArray());
  },

Hope that helps. good luck.