Vue.Draggable
Vue.Draggable copied to clipboard
SortableJS
Can delete the ghost element?
I have study for a while how to achieve that but failed.
When I drag an element and move it, its ghost element will move with it. I know we can design the ghost element style by adding ghost-class.
But can we remove the entire ghost element from DOM and make a new one?
Edited: https://jsbin.com/henuyiw/edit?css,js,output. From the link, you can see when you drag an item, the ghost element has blue background. that is the element I want to remove when drag move. make new one means I want to design my own ghost element to this:
<div style={background: yellow; height 35px; width: 100%}></div>
The reason is that in my project, the draggable items are iframe, so it will create a new iframe as ghost element when I drag the item.
Remove the ghost element and make a new one? That sounds like you want to get rid of the ghost element. But I don't know what you mean by "make a new one".
Do you mean such functionality like http://sortablejs.github.io/Sortable/#swap?
yes, like that, thank you! but not make visibility: hidden, instead i want to remove the whole ghost element. because my draggable items are iframe, so when one of these iframe is dragged from list-1 to list-2, it will create a ghost element in the list-2. i am trying to avoid that
I'm not sure that's doable in a good UX kind-of way.
If you change visibility: hidden to display:none in my jsbin, that's essentially the effect you'll create when removing an item.
To remove an item you could use the @start listener on your component and have a function run everytime you start the draggin. That function would then find the current item's index in the array and splice the array to remove the item from the array altogether. Or something like that.
But the sorting will get incredibly difficult as you have no visual representation for where the item is supposed to go once dropped.
thank you for your advice, i have tried the display: none but still not meet my requirement as the iframe event/api still calls when you drag and dragover the droppable area.
regarding the visual representation, my idea is that remove the ghost element and create new element for indicating where you can drop like <div style={background: yellow; height 35px; width: 100%}></div>
i also think about the @start but my situation is when the draggable iframe is dragged from list-1 to list-2, only when it dragover in the droppable area at list-2, the ghost element show up. how can i catch that ghost element by @start?
i have tried the display: none but still not meet my requirement as the iframe event/api still calls when you drag and dragover the droppable area.
Ah yes, it was merely meant for demonstrating how the sorting would act if the ghost was just deleted. Sorry for confusion!
you can listen onChange event and get incomming element index, create your ghost by yourseft, and use ghostClass with invisiable element
