How to change ghost image?

[Uysim]

I tried to change ghost image with datatransfer but not success. Anyone used to change the ghost image?

[keeev]

Hi @Uysim what exactly did you try to change?
The ghost-class?
Do you want to apply a background-image?

Maybe it's more helpful if you can tell us what you want the end-result should be.

[Uysim]

@keeev I don't know the way you implement the ghost element. Because I can not inspect element will dragging. But I check on internet it call ghost image. It is the placeholder of the dragging element.

[David-Desmaisons]

The only supported solution is ghost-class as sugested by @keeev check the sortable.js repo for more detail and example.

[Uysim]

@David-Desmaisons why you closed this issue. Ghost class only allow you to customize the style. How about changing the ghost element like html?

[David-Desmaisons]

@Uysim it will be a nice feature to have but it is not supported nor there is a plan to support it.

[stian-scholtz]

Would be great to have this feature. Possibly something like :ghost-el="renderGhostEl()". Where renderGhostEl = (item) => document.createElement()... Not sure if this is possible. It is just a thought.

[KTS915]

It's already possible to do this, but not by using the ghost class. Instead you need to do something like this:

setData: function( dataTransfer, dragEl ) {
	var ghostImage = document.createElement( 'div' );
	ghostImage.id = 'ghost-image';
	ghostImage.className = 'ghost-image';
	ghostImage.innerHTML = '<div class="some-class"><h3>' + dragEl.querySelector( 'h3' ).textContent + '</h3></div>';
	ghostImage.style.position = 'absolute';
	ghostImage.style.top = '-1000px';
	ghostImage.style.width = dragEl.getBoundingClientRect().width + 'px';
	document.body.appendChild( ghostImage );
	dataTransfer.setDragImage( ghostImage, 30, 20 );
}

[heyakyra]

Does this still work? The :setData prop is undocumented (and doesn't follow normal vue prop naming conventions) and doesn't seem to get called when dragging.

Also mentioned elsewhere:

• setDragImage doesnt work #340 (comment)
• Need update docs for set-data #757
• How to disable the ghosting? #345 (comment)

[KTS915]

This doesn't use Vue (or React, or any comparable library). It's just standard vanilla JavaScript. And yes, it does work.

[heyakyra]

Thanks for the quick reply. How/where do you attach the setData handler?

[KTS915]

This file gives you an example of how we use it in ClassicPress: https://github.com/ClassicPress/ClassicPress/blob/develop/src/wp-admin/js/widgets.js

[heyakyra]

Vue.Draggable users don't have direct access to Sortable's constructor invocation, but it does look like :setData would be applied according to the source code https://github.com/SortableJS/Vue.Draggable/blob/master/src/vuedraggable.js#L215-L226 so I'm not sure why it isn't working for me