{{draggable-object}} as a component mixin

[archseer]

It would be nice if {{draggable-object}} was available as a component mixin, my specific usecase is as follows: I have a track-item component that I render inside an each block, and I wanted to make it drag 'n droppable. I ended up wrapping the entire template:

// templates/components/track-item.js
{{#draggable-object content=track}}
// my track component template here
{{/draggable-object}}

Problem is, the DOM structure now nested:

<li class="ember-view track" id="ember683">
  <div class="ember-view js-draggableObject draggable-object" draggable="true" id="ember684">  
    <!-- ... -->
  </div>
</li>

The styling is now broken, because it wasn't expecting the extra object. Admittedly, I can just tweak the CSS (which is what I did), but it would be nice to get rid of the extra wrapper.

[dgavey]

It's a thought for sure, I'll see what I can do to support it. In the mean time to clean up your DOM structure you could pass in a tagName='span' in the {{draggable-object}} component as a span wouldn't mess with the layout nearly as much as a div might in this instance.

[lcpriest]

Short term, couldn't you just extend your component from the draggableObject rather than using it as a mixin? @archSeer

[sbsurf]

I can confirm that extending draggableObject does the trick:

import DraggableObject from 'ember-drag-drop/components/draggable-object';

export default DraggableObject.extend(...

[dgavey]

thanks @sbsurf for the example, this is pretty much as good as a mixin I think.

[yankeeinlondon]

would the same thing be possible with draggable-object-target?

[dgavey]

@ksnyde You could easily extend the draggable-object-target as well.