Personalize the "spirit" component using VueDraggable

Question

Personalize the "spirit" component using VueDraggable

I am currently utilizing the library found at: https://github.com/SortableJS/Sortable

In my project, I have 2 lists where I can drag one element to the other list. However, when I drag the item, it appears as a clone of the icon. My goal is to have a customized element, known as a "Ghost element," displayed while moving the item between the lists.

SortableJS offers a feature called "ghostClass," which allows the addition of a custom class. However, I would like to further customize the ghost element itself. Is there a way to achieve this?

javascript vue.js sortablejs

Answer 1

Answer №1

After some exploration, I managed to discover how to customize the "ghost" element in VueDraggable. This information may be helpful for other developers facing the same issue.

Here is the key method to use:

// Called when dragging element changes position
onChange: function(/**Event*/evt) {
    evt.newIndex // This is likely used to retrieve the current index of the dragging element
    // Same properties as onEnd
}

The solution that worked for me was:

<VueDraggable :onChange="sectionChange " ...

The function itself:

const sectionChange = (evt) => {
  evt.item.innerHTML = `<div style="margin:0 auto;background:red;width:100px;">ADD ICON</div>`
}

Answer 2

After some exploration, I managed to discover how to customize the "ghost" element in VueDraggable. This information may be helpful for other developers facing the same issue.

Here is the key method to use:

// Called when dragging element changes position
onChange: function(/**Event*/evt) {
    evt.newIndex // This is likely used to retrieve the current index of the dragging element
    // Same properties as onEnd
}

The solution that worked for me was:

<VueDraggable :onChange="sectionChange " ...

The function itself:

const sectionChange = (evt) => {
  evt.item.innerHTML = `<div style="margin:0 auto;background:red;width:100px;">ADD ICON</div>`
}

Personalize the "spirit" component using VueDraggable

Answer №1

Similar questions

Is the CSS Transition Solely Active for the Introductory Animation?

Downloading a Facebook profile picture is a time-consuming task

Using State.go in JavaScript involves waiting for it to finish before proceeding

What is the reason behind negative numbers appearing as "5-" rather than "-5" in the basic calculator coded using HTML and JavaScript?

"Applying CSS styles to highlighted text using jQuery - how can I do it

Elements that are hidden or not displayed are still able to receive mouse over events

Every individual child component must be assigned a distinct key prop, even if they are pre-defined. - Utilizing REACT

`store and utilize the data retrieved from chrome.sync.storage.get()`

The code written inside the <script> tag seems to be malfunctioning when placed in the component.html file within VScode while working with

What is the best way to retrieve the [id]/routeName in Next.js?

My Express server is having trouble loading the Static JS

Invoking an asynchronous method of the superclass from within an asynchronous method in the subclass

Angular's FormGroup for reactive forms is a powerful feature that allows for

Leveraging Python to authenticate on a website using JavaScript and secure HTTPS connection

Issue with Promise rejection not being caught in Node.js with ExpressNode.js and Express are not

Learn how to easily modify a value in a CVS file by simply clicking on the data point on a highcharts graph

Error: The jQuery TableSorter Plugin is unable to access property '1' as it is undefined

What is the best way to access an Ajax response outside of its function using JQuery?

Designing a personalized mat-icon using the Github SVG

What is the best way to locate the source of a custom Vue component?