[Vuejs]-How to disable vue draggable placeholder

4👍

On each of your <draggable> components within your <template>, you can set the ghost-class prop to a CSS class that hides the drop placeholder (ie. "ghost", or "dragging element" as you called it) using display: none; or visibility: hidden;.

For example:

  • In your <template>:

     <draggable ghost-class="hidden-ghost">
    
  • and in the <style> section of your Vue Single File Component, or in the corresponding stylesheet:

     .hidden-ghost {
         display: none;
     }
    

Working Fiddle

The ghost-class prop internally sets the SortableJS ghostClass option (see all the options here). The ability to modify these SortableJS options as Vue.Draggable props is available as of Vue.Draggable v2.19.1.

Leave a comment