[Feature Request] Option to show blank element in place of ghost

[armujahid]

There should be an option to show blank element is place of ghost that doesn't contain any child elements. I am not talking about hiding ghost.

Use case of this feature: Dragable item can contain onload handlers or iframe etc. That can trigger API calls on ghost dom node insertion. Hiding the ghost will not prevent API calls/event handlers execution. Demo: https://codepen.io/armujahid/pen/XOBgLN Try to drag 1st element to 4th element. API 1 will be called thrice because of ghost insertion on every move.

JQueryUI Sortable already has this feature by default. It shows empty ui-sortable-handle instead of showing ghost element.

[owen-m1]

Try:

new Sortable(list, {
    ghostClass: 'hidden'
});

.hidden {
    visibility: hidden;
}

Demo:

[armujahid]

Issue still exists even after hiding ghost. You can check console logs and network calls. As I already mentioned hiding it will not stop dom events/API calls. Demo: https://codepen.io/armujahid/pen/qgyMOV

[owen-m1]

@armujahid Apologies, I did not read far enough into your issue.

I created a demo that will set the src of the iframe to an empty string while it is being dragged: https://codepen.io/owen-m/pen/aXjRvR

The "onload" event is still fired, but no network request is made, only until the element is dropped (this would have to happen anyways).

Let me know if this solution is adequate. An option for a placeholder that is different from the dragging element is certainly a feature that can be added in the future, but for now this is all I can think of.

[armujahid]

I created that iframe and onload demo just for example. Actually we have full-fledged JavaScript dragable apps (called widgets) developed in multiple frameworks (angular, react, polymer etc). So for now I will use JQueryUI Sortable that already provides this feature. I will try to raise PR after analyzing this code base. May be we should add feature/enhanement label to this issue?

[owen-m1]

If there was a way you could delete the contents of the component, and then re-add them later, you could do that instead of removing and re-adding the src of the iframe.

[armujahid]

I ended up using Muuri draggable grid layouts that can rearrange items using CSS transforms without insertion/removal of dom nodes :v:

[mszacun]

Is there possibility to remove ghost element completely? When moving between groups i don't want anything to show (not even empty space like when using visibility: hidden in new group before dropping items. I use highlighting with color to indicate that dropping is possible.

When i apply display: none to ghost element, dragged element is not positioned under cursor, because it takes initial position based on ghost element position. Is there any other way?

[owen-m1]

@mszacun Try setting the display:none in the onStart event, which will be fired after the dragged element is positioned, and then you can reset the display in onEnd.