property to disable draggable target (where target is dynamic)

[yankeeinlondon]

I have draggable targets which depend on state to determine whether they should be treatable as activated or not. Is there a property that one can set to provide this functionality?

It appears that using the isDraggable property on the draggable-object will block an item from being dragged but in my case I'm interested in modifying the bahavior of the target rather than the draggable.

So, for instance, if you have a calendar where each day is a target but once a particular day get's "over-subscribed" with items it then becomes unavailable as a drop target.

[yankeeinlondon]

As a workaround I have created my own acceptDrop property:

export default Ember.Component.extend({
  acceptDrop: function(event) {
    if (this.get('isDroppable')) {
      this.handleDrop(event);
      event.preventDefault();
    }
  }, 

which I then pass in the template as:

{{#draggable-object-target acceptDrag=acceptDrag}}
  ...
{{/draggable-object-target}}

[yankeeinlondon]

Ideally in the case of a "denied" target it would be nice to have the item glide back to it's original place on the screen so as to give a visual indication to the user what has happened.

[gabrielgrant]

you can do this with CSS by setting the inactive class (for example) on drop targets you want to disable and adding the following rule:

.draggable-object-target.inactive{
    pointer-events: none;
}

Conversely, you can keep all drop points disabled by default, and activate individual drop targets by adding an active class with the following rules:

.draggable-object-target {
    pointer-events: none;
}
.draggable-object-target.active {
      pointer-events: auto;
}