[metal-drag-drop] Provide some CSS class to the element being dragged about metal-plugins

[diegonvs]

Thanks for clarification @p2kmgcl! I'll take a look on this!

[diegonvs]

Hey @p2kmgcl, once targetOverClass and draggingClass receives a string to add classes, you could use like this example:

var dragDrop = new metal.DragDrop({
			dragPlaceholder: metal.Drag.Placeholder.CLONE,
			handles: '.handle',
			sources: '.box',
			targets: '.target',
			targetOverClass: 'over over2',
			draggingClass: 'dragx'
});

Note that when you are defining a targetOverClass or draggingClass the default targetOver or dragging class will not be added automatically. You can add manually like draggingClass: 'dragging dragx' or targetOverClass: 'targetOver over over2', if you want add a existing default class, for example :)

[p2kmgcl]

Hi @diegonvs, let me try to clarify this. While dragging some element, you have three elements:

• A target element where you are dragging over, which can be customized with targetOverClass.
• A dragging element, which only exits while dragging, and which can be customized with draggingClass.
• And a source element, which is the element where the drag started. This element cannot be customized, and this is the option I would like to have included with a dragSourceClass or so option.

A manual solution would be adding a customized class on dragStart event and remove it on drop, but I'd be nice to have it builtin:

function handleDragStart(data) {
  data.source.classList.add('dragged');
}

function handleDrop(data) {
  data.source.classList.remove('dragged');
}