sagalbot / vue-sortable Goto Github PK

Can't this be used along with v-for where items are dynamic?

when drag end,it will open a new tab in some browser

There should be a way to import this from the CDN (import Sortable from "https://...") without having to import Sortable separately and without having to use globals. Right now the non-build tools installation feels like an afterthought.

See this example

As the list items are sorted, the Vue data (shown as json at the bottom) doesn't change.

I'm trying to use this plugin with vue 2.0 and I'm always getting the following error 'Uncaught Sortable: el must be HTMLElement, and not [object Undefined]'

Any help would be most appreciated. Thanks

Hi guys,
I'm using vue-sortable and it's really convenient to build a sortable grid. But I'm confused about how to add the callback function when I finish the sorting action. Could you give a demo for that?
BTW, I use it in HTML5 not NodeJS.

Thanks.

Is it possible to use multiple lists, I need to do something like what Trello provides, I'm building a Kanban board and I need to move items between lists.

Hello, I need some help figuring out how one would sort entries between the days of the week. I have a board in which every column represents a day of the week and I would like to be able to sort entries between days. Also I need to somehow get the necessary information that I need to write to the database to save the position of the entry.

This is what I have so far:
http://codepen.io/rgbskills/pen/XpqqWK?editors=0010

Thank you in advance :)

I don't know how to use it in vue-cil , it dosen't work and throw a error 'Error in directive sortable bind hook: "Sortable: el must be HTMLElement, and not [object Undefined]"'

Based off of: codepen

I am getting this error: [Vue warn]: Error in directive sortable bind hook: "TypeError: Cannot read property 'querySelector' of null"

Here's my script which is located in the component template:

import Buefy from 'buefy';
    Vue.use(Buefy);
    const createSortable = (el, options, vnode) => {

        let order = [];

        return Sortable.create(el, {
            ...options,

            onStart: function (evt) {
                // when the sort starts, store the initial order of the array
                order = this.toArray();
            },

            onEnd: function (evt) {

                // when the sort ends, set the order to the initial state
                this.sort(order);

                // change the order using splice
                const data = vnode.context.data;

                data.splice(evt.newIndex, 0, ...data.splice(evt.oldIndex, 1));

                // now it is safe, you can update the order parameter
                data.forEach((o, i) => {
                    o.order = i + 1;
                });

            }

        });

    };

    const sortable = {
        name: 'sortable',
        bind(el, binding, vnode) {
            const table = el.querySelector('table');
            table._sortable = createSortable(table.querySelector('tbody'), binding.value, vnode);
        }
    };
    export default {
        name: 'ExampleComponent',
        directives: { sortable },
        data() {
            let self = this;
            return {
                blis: [],
                currentPage: 1,
                perPage: 10,
                pageOptions: [ 5, 10, 15 ],
                totalRows: 0,
                sortBy: null,
                sortDesc: false,
                sortDirection: 'asc',
                sortableOptions: {
                    chosenClass: 'is-selected'
                },

Please check my two examples.

• Using vue 1.0

http://jsbin.com/lukoxelube/edit?html,js,output

• using vue 2.0

http://jsbin.com/sozayisawi/edit?html,js,output

I update Chrome to 62, vue-sortable does not trigger onUpdate event.
Other people using Chrome 61 don't have this problem

html by jQuery
$('<ul class="me-slide-title-wrap" v-sortable="options"></ul>');

vue code
 Vue.use(Sortable);
    this.vue = new Vue({
      el,
      data () {
        return {
          slides,
          currentSlide,
          dragged: false,
          options: {
            onUpdate: this.onUpdate,
          },
        };
      },
      methods: {
        onUpdate (event) {
          console.log('update', this.dragged)
          updateSlides(event);
        },
        active(id) {
          console.log('active')
        },
        dragenter (id) {
          console.log('drag enter', this.dragged);
        },
        dragleave () {
          console.log('drag leave', this.dragged);
        },
        dragstart () {
          console.log('drag start', this.dragged);
        },
        dragend () {
          console.log('drag end', this.dragged);
          this.dragged = false;
        },
      },
    });

'Error in directive sortable bind hook: Sortable is not a constructor'

I assume the Sortable dependency did some breaking changes

I have an issue which I cant get my head around. I am us v-for to print out my list in this video. When the update has finished I am using your example to reorder the array, which in turn, the vuejs reacts and reorders the already ordered list. As you can see I looks as if its randomly ordering the elements.

Does anybody know how to solve this?

for example:

<ul v-sortable="{onUpdate: someFn, disabled: condition}">
...
</ul>

when the condition is toggled bwteeen true & false，how to update the disabled status of the vue-sortable?

Hi there.
Congrats for the lib, it looks good.

Is there any plans to make it work with nested lists (tree)?

Thanks!

Hi Team

I am facing an error while compiling the below code.

https://codesandbox.io/s/react-sortablejs-error-kvfy1

I am trying to get the "Disable Sorting" (https://sortablejs.github.io/Sortable/) example code working in my local.

Please help me.

import Sortable from 'vue-sortable'

Vue.use(Sortable)

This is how I used it and got the error in the title.

example:

<template>
  <div>
    <div v-for="c in categories">
      <p>{{c.name}}</p>
      <ul v-sortable="{group:'list',onEnd:onEnd}">
        <li v-for="item in c.list">{{item}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        categories: [{
          _id: '0000000001',
          name: 'in progress',
          list: ['111', '222']
        }, {
          _id: '0000000002',
          name: 'plan',
          list: ['333']
        }, {
          _id: '0000000003',
          name: 'completed',
          list: []
        }]
      }
    },
    methods: {
      onEnd (e) {
        console.log(e)
        console.log(e.from === e.to)    // why? Both of they refer to `from element`
      }
    }
  }
</script>

Or JS Bin

Why e.from will be equal to e.to?
And is there any way to get both element the item drag from and to, how to get the category too.

I only want to sort part of my list, to be precise, I want sort the bottom half of my list. Does vue-sortable support this?

When use v-sortable directive , the code gives following exception:

Uncaught Sortable: `el` must be HTMLElement, and not [object Undefined]

And nothing gets rendered.
Libraries versions used:

"sortablejs": "^1.4.2",
"vue": "^2.0.1",
"vue-sortable": "^0.1.3"

Am I doing something wrong? The events listed in the RubAxA/Sortable documentation do not seem to work.

<template>
<ul class="list-group" v-sortable="options">
    <li class="list-group-item">Foo <i class="handle"></i></li>
    <li class="list-group-item disabled">Bar <i class="handle"></i></li>
    <li class="list-group-item">Baz <i class="handle"></i></li>
</ul>
</template>

<script>
export default {
    data() {
        return {
            options: {
                handle: '.handle',
                filter: '.disabled',
                onStart: function (event) {
                    console.log('onStart fired'); // Never happens
                }
            }
        }
    }
}
</script>

Is there a way to reload configuration at run-time? I am changing the underlying data-set during runtime, but the configuration isn't updating along with it. Any thoughts? Thanks for you work on this package! :)

Hi,

Is there a way to sort table rows? Or are you planning to implement this feature later?

I'm trying to use v-sortable on a grid of v-flex'es and I cant seem to get it sorting, no errors of any kind, just not sortable.

Is my usage of vue-sortable correct?

main.js

import Sortable from 'vue-sortable'
Vue.use(Sortable)

example:

<v-layout row wrap>
  <v-flex v-sortable v-for="(person, index) in loadedRecords" :key="index"  xs6>
              <v-card>
                <v-card-text>
                  <p class="">{{person.first_name}} {{person.last_name}}</p>
                </v-card-text>
              </v-card>
  </v-flex>
</v-layout>

I have this error:

Error in directive sortable bind hook: "Sortable: el must be HTMLElement, and not [object Undefined]"

I use it on a parent element that wraps a v-for on an imported component.
Maybe Vue is still initialising? I see that my components are mounted after this error.

I add object with options in list then init plugin. After sorting items source object remained unchanged. Нow to get sorted object? Whether this plugin can't this?

Hi,
We're using vue 1.0.13 and ended up using your library, thanks for your work.

We've encountered an issue when dragging an item in a v-for from any position into the last position of the list. It seems that the last item is placed after the "v-for end" comment in the DOM. It does not affect the behaviour of further dragging and dropping items in the list, however when we try to push something in the list, the console throws an exception.

Here's a screenshot showing the li item being moved below the v-for comment line : https://imgur.com/a/I1Odo

Here's a pen reproducing our setup : https://codepen.io/Leotomas/pen/veayav?editors=1111

And here's a little video showing the bug : https://www.youtube.com/watch?v=2jhnJ9adrWM&feature=youtu.be

We have found a workaround. In the method that pushes the new item inside the list, we toggle the visibility of the list with a v-if, when then list reappears the dom issue is resolved.

addTask(instance) {                                                                                                                                                                                                                                         
                   let i = _.findIndex(this.data.instances, {id: instance.id});                                                                                                                                                                                            
                   let item = {                                                                                                                                                                                                                                            
                       id: uuid.v4(),                                                                                                                                                                                                                                      
                       libelle: instance.__new_item,                                                                                                                                                                                                                       
                       checked: false                                                                                                                                                                                                                                      
                   }                                                                                                                                                                                                                                                       
                   let p =  this._clone(this.data.instances[i].taches);                                                                                                                                                                                                    
                   p.push(item);                                                                                                                                                                                                                                           
                   this.states.ready = false;                                                                                                                                                                                                                              
                   this.$nextTick(() => {                                                                                                                                                                                                                                  
                       this.states.ready = true;                                                                                                                                                                                                                           
                       this.$set('data.instances[' + i +'].taches', p);                                                                                                                                                                                                    
                       instance.__new_item = null;                                                                                                                                                                                                                         
                   });                                                                                                                                                                                                                                                     
               },

So it seems that when sortable moves any item in the last position, the relationship between vue and the DOM is broken somehow.

Thanks in advance

Hi,

Is there a way to get the instance of the sortable element? I would like to manually call the toArray() method, because for some reason it isn't detecting updates to the underlying data source before I perform some ajax updates. (I'm guessing the underlying cause is that the DOM isn't updated in time for SelectJS to register the change.)

Thanks!
~Mike