Disable draggable on an item about vue.draggable HOT 7 CLOSED

Hi @mathlet0x , you can use draggable option to use a class for the draggable items. You can use vue class binding to set this class for the draggeble element.

from vue.draggable.

You can use like this, thanks @David-Desmaisons

draggable_file_list.vue

<template>
  <div v-if="hasFiles">
    <draggable v-model="draggableList" draggable=".js-draggable-file-list-item" animation=200>
      <draggable-file-list-item
        .
        .

draggable_file_list_item.vue

<template>
  <div class="up-container" :class="{ 'js-draggable-file-list-item': !isLoading }">
   .
   .

from vue.draggable.

Thanks @David-Desmaisons

from vue.draggable.

If you have :options - you must set draggable to the options attibute

<draggable class="draggable__container" v-if="isRenderInfo" :list="sortedBoardCard"
                   v-model="sortedBoardCard"
                   :options="{
                       group: 'people',
                       draggable: '.active'
                   }"
                   @end="onDraggableEnd" :move="onDraggableMove">
            <transition-group class="draggable__area">
                <div class="draggable__element" v-for="card in sortedBoardCard" @click="newTab(card)"

from vue.draggable.

None of the options above worked for me.

<draggable
    :list="sections"
    :options="{ draggable: '.js-draggable-file-list-item' }"
    @change="checkChange">
	<div v-for="section in sections" :key="section.id">
          <my-section
	          :section-name="section.name"
              :the-id="theId"
              :class="{'js-draggable-file-list-item': !isDraggable(section.name)}"
              ></my-section>
    </div>
</draggable>

Is there something wrong?

from vue.draggable.

None of the options above worked for me.

<draggable
    :list="sections"
    :options="{ draggable: '.js-draggable-file-list-item' }"
    @change="checkChange">
	<div v-for="section in sections" :key="section.id">
          <my-section
	          :section-name="section.name"
              :the-id="theId"
              :class="{'js-draggable-file-list-item': !isDraggable(section.name)}"
              ></my-section>
    </div>
</draggable>

Is there something wrong?

nope. It must works. Did you check the return of "isDraggable" method?

Maybe we have different versions?
I use "^2.16.0"

I found this hack in the 'vuedraggable' code:

var options = _extends({}, this.options, optionsAdded, { onMove: function onMove(evt, originalEvent) {
            return _this3.onDragMove(evt, originalEvent);
          } });
        !('draggable' in options) && (options.draggable = '>*');
        this._sortable = new Sortable(this.rootContainer, options);
        this.computeIndexes();

from vue.draggable.

Interesting, my version is 2.24.0
isDraggable is returning the expected value.

So, If I understand the use correctly it will allow the drag when the item has the js-draggable-file-list-item class.
If this is the expected behaviour, then I'm not sure what is going on.
Inspecting the elements, it has the class applied the way I want.

from vue.draggable.