Accept drag class is not display when dragging over draggable-object

[cbou]

trafficstars

accept_drag class is not set when you drag an object over a draggable-object even if it's contained by a draggable-object-target.

The class is not set but if you drop the object the action will be executed.

{{#draggable-object content=this}}
{{/draggable-object}}

{{#draggable-object-target action='dragged'}}
  {{#draggable-object content=this}}
  {{/draggable-object}}
  {{#draggable-object content=this}}
  {{/draggable-object}}
  {{#draggable-object content=this}}
  {{/draggable-object}}
{{/draggable-object-target}}

[dgavey]

I'll look into this later.

[Sype911]

Hi! I'm apparently facing the same issue. Has anyone worked out a fix, even temporary? Thank you!

[jzcorrea]

+1

[jzcorrea]

@cbou @Sype911 I found an workaround by creating an custom component that extends from draggable-object and uses the dragEnter and dragLeave HTML5 events to manipulate a flag that adds or remove a CSS class when something is being dragged over the component:

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

export default DraggableObject.extend({

	classNameBindings: ['isDraggingOver:is-dragging-over'],

	isDraggingOver: false,

	dragEnter() {

		this.set('isDraggingOver', true);
	},

	dragLeave() {

		this.set('isDraggingOver', false);
	}
});

In my case, i want to change the element's style, not the parent's style (draggable-object-target, for example), but you can use jQuery to get the parent element and add/remove CSS classes manually. I have the same problem and i know this is not the best approach, but works. :grin:

[Igor-Rabodzei]

The same problem. I just forked this package and changed a function to return true.