Search code examples
ember.jsember-drag-sort

ember-drag-sort custom placeholder dropzone element?

Is it possible to replace the default square placeholder element? Ideally I'd like to have a placeholder under an empty list that reads something like "No Items in List" & then when an item from a different list is dragged over such element it adds it to the list like the normal functionality.

Solution

  • Sure, this can be done with simple CSS:

    .dragSortList.-isEmpty:not(.-isDragging):after {
  content: "No Items in List";
}

    You can tweak it with classes -isDragging, -isDraggingOver and -isDragged.

    See demo on Ember Twiddle.