What is the best way to position a static element next to a Vue draggable list?

I'm currently working on implementing a feature to display a list of draggable elements using vue-draggable. These elements are occasionally separated by a fixed element at specified position(s).

My approach so far has involved creating a separate element as needed within the v-for loop.

<draggable :list="list" class="dragArea" :class="{dragArea: true}" 
           :options="{group:'people', draggable: '.drag'}" @change="handleChange">
    <template v-for="(element, index) in list">
      <div class="drag">
        {{element.name}}
      </div>
      <div class="nodrag" v-if="index === 2">Fixed element</div>
    </template>
</draggable>

Unfortunately, this approach is causing issues with my app's behavior as the indexes returned by the onChange event are no longer what I expect. (You can see an example on this jsfiddle)

Could it be that I'm approaching this incorrectly? I have also looked into using the move prop to disable dragging functionality as suggested here, but the issue persists because I'm utilizing elements from outside the draggable list, I believe.

In our live scenario, the index of the fixed element may vary, if that makes any difference.

javascriptvue.jsdraggablesortablejs

Answer №1

To achieve a fixed element functionality within your draggable component, you can utilize the move attribute along with specifying which elements should be considered as fixed. Here is an example implementation:

<draggable
  :list="list"
  :disabled="!enabled"
  class="your_class"
  :move="checkMove"
  @start="dragging = true"
  @end="dragging = false"
>
...
</draggable>

...........

data() {
  return{
    list: [{foo: "bar", ..., fixed: true}, {foo: "bar", ...}, {foo: "bar", ...}, {foo: "bar", ..., fixed: true}]
  }
}

...........

methods: {
  checkMove(e) {
    return !this.list[e.draggedContext.futureIndex].fixed
  }
}

Answer №2

To solve the issue, make sure to include your "fixed elements" as data in the array passed to Vue.Draggable. Avoid using v-if because SortableJS counts hidden elements created by VueJS v-if as actual elements. Instead, add an item after John3 in the array and remove the v-if. Include a draggable property in your objects and apply the 'drag' class only to elements with this property set to true. Another problem is that Sortable will not index undraggable elements, but this may be resolved in a future update. Consider using the filter option for now.

Here is an example (without using filter): https://jsfiddle.net/3wrj07et/5/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble reaching the instance of createApp that was exported in Vue 3

I am facing an issue with my createApp instance in the vuetify plugin. In my main file, I have imported createApp from vue and used it to create an app with App.vue. I also imported the vuetify plugin as shown below: import { createApp } from 'vue&apo ...

vue.jsvuetify.jsvuejs3vuetifyjs3

Adjust the size of child divs in relation to their parent divs using jQuery

I am working with 4 divs and trying to adjust the size of the inner divs in relation to the parent divs dynamically. I have added a .top class, but I'm unsure if it is necessary or beneficial. Here is my fiddle for testing purposes: http://jsfiddle.n ...

javascriptjquery

Generating a new display div element using an anchor link

I've set up a div container with a button that, upon clicking, adds a class to an element in my markup causing it to expand and take over the entire screen. Markup before: <section class="isi" data-trigger="toggle" data-trigger-class="isi--show-i ...

javascriptjquerycss

Vuetify text appearing to the right of the v-navigation-drawer

I am a beginner programmer looking to create a fixed side navigation bar, similar to an admin page. However, the router-view is not displaying correctly on the right side of the page. I realize that I have not included href links for each navigation list i ...

vue.jsvue-routervuetify.js

Implementing type-based validations in Vue.js 3 using Yup

Greetings! I am facing a minor issue that needs to be addressed. The scenario is as follows: I need to implement validation based on the type of member. If the member type is corporate, then the tax number should be mandatory while the phone number can be ...

javascriptvue.jsvuejs3yup

Error in Node.js: Unhandled promise rejection due to undefined value

We're currently facing an issue with the create user controller in Node.js Express. The problem arises when attempting to sign up on the front end, resulting in an error message: "Unhandled promise rejection error value is not defined." Although it ap ...

javascriptnode.jsexpressmongoose

Is it possible to perform a legitimate POST request using AJAX XMLHttpRequest, rather than the traditional var=val URL type post?

Apologies for the unclear question, but here is my query... I recently began using Ajax and encountered an issue with sending XMLHttpRequest in the background. I am facing problems with certain html special characters in the form data, especially the & ...

javascriptajaxpost

Modifying the <TypescriptModuleKind> setting for typescript transpilation in project.csproj is not supported in Visual Studio 2017

I recently encountered an issue with changing the module kind used by the transpiler in Visual Studio. Despite updating the <TypescriptModuleKind> in the project's project.csproj file from commonjs to AMD, the transpiler still defaults to using ...

javascriptvisual-studiotypescriptmoduletsc

An insightful guide on effectively binding form controls in Angular using reactive forms, exploring the nuances of formControlName and ngModel

Here is the code snippet: list.component.html <form nz-form [formGroup]="taskFormGroup" (submit)="saveFormData()"> <div nz-row *ngFor="let remark of checklist> <div nz-col nzXXl="12" *ngFor="let task of remark.tasks" styl ...

javascriptangulartypescript

Executing Javascript dynamically in VueJS: Learn how to run code from a string efficiently

Currently, I am developing a website with VueJS that enables selected users to upload scripts for automatic execution upon page load. For instance, here is an example of the type of script a user may input: <script src="https://cdnjs.cloudflare.com/aja ...

javascriptvue.js

Clicking 'Back to Top' within an accordion

On my webpage, I have two scrolls present. One is clearly visible on the page (not loaded with ajax), while the other one is located inside an accordion. Both of them share the same class names. I want these scrolls to always be positioned at the top. I&a ...

javascriptjqueryhtmlcsstwitter-bootstrap-4

Dots are used to indicate overflow of title in React Material UI CardHeader

Is there a way to add ellipsis dots to the title in my Cardheader when it exceeds the parent's width (Card width)? Here is what I have attempted so far: card: { width: 275, display: "flex" }, overflowWithDots: { textOverflow: &apo ...

javascriptcssreactjsmaterial-ui

When utilizing express-formidable to retrieve multipart data, it causes basic post requests with request body to hang indefinitely

app.js const express = require('express') const app = express() const appInstance = express() const PORT = process.env.SERVER_PORT || 8080 app.use(express.json()) app.use(express.urlencoded({ extended : true })) app.use(formidableMiddleware ...

javascriptnode.jsexpressformidable

Transform the angular code in order to execute innerHTML functions

function campform() { $.ajax({url: "{{ path('campform') }}", success: function(result){ $("#respuesta").html(result); }}); } I am having trouble with the angular code in the result I received. Can anyone provide guidance on how t ...

javascriptjqueryajaxangularjssymfony

I am interested in displaying the PDF ajax response within a unique modal window

With the use of ajax, I am able to retrieve PDF base64 data as a response. In this particular scenario, instead of displaying the PDF in a new window, is it possible to display it within a modal popup? Any suggestions on how this can be achieved? $.ajax ...

javascripthtmljquery

How to Retrieve Error Message from Response in Django REST Framework When Making a 400 Bad Request

I have a setup where I'm using Vue with DRF for my application. Whenever there is an issue with the form data and it is sent to the API, it responds with a 400 Bad request error as expected. The response in the Network tab provides a clear validation ...

vue.jsdjango-rest-frameworkaxios

Troubleshooting error in WordPress: Changing innerHTML of dynamically created divs using JavaScript. Issue: 'Unable to set property innerHTMl of null'

I am struggling to modify the innerHTML of a "View cart" button using a dynamically generated div class on my Wordpress/Woocommerce site. In a previous inquiry, I was informed (thanks to Mike :) ) that since JavaScript is an onload event, the class changes ...

javascriptphpjqueryhtmlwordpress

Interactive Form directly linked to SQLite3 database

Looking for assistance with converting a modal from static, fake data to dynamic data from an SQLite3 database. The goal is to display a table of existing data and allow users to add new rows by clicking a +New button. However, when trying to incorporate ...

javascripthtmljquerycssdjango

Refresh the Document Object Model (DOM) and transmit the present time

I am having an issue with sending the actual current time when a button is clicked. Instead of getting the current time, I am receiving the time when the page initially loaded. This button is used to submit a form on Google Sheets using an API. This is th ...

javascriptphpjquerydom

Vue allows a child component to share a method with its parent component

Which approach do you believe is more effective among the options below? [ 1 ] Opting to utilize $emit for exposing methods from child components to parent components $emit('updateAPI', exposeAPI({ childMethod: this.childMethod })) OR [ 2 ] ...

javascriptvue.jsvue-component