sagalbot / vue-sortable

A lightweight directive for reorderable drag-and-drop lists using RubaXa/Sortable
http://sagalbot.github.io/vue-sortable/
MIT License
721 stars 104 forks source link

has this plugin any incompatibility with vue 2.0? #10

Open arquadrado opened 8 years ago

arquadrado commented 8 years ago

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

sagalbot commented 8 years ago

I haven't done any testing with 2.0, but I know that directives were changed significantly. Sounds like the last release candidate is out, so I'll get this updated in the near future.

jasonlfunk commented 8 years ago

I'm using your library in a project that I'm upgrading to 2.0. I was able to replace the directive with this:

    Vue.directive('sortable', {
      inserted: function (el, binding) {
        var sortable = new Sortable(el, binding.value || {});
      }
    });

You'll notice that I removed some of the code around saving references to the sortable. As directives no longer have an instance associated with them, I don't know that it's possible to restore this functionality. However, I wasn't using it so it wasn't a problem.

kminek commented 8 years ago

hi there :) finally i managed to get sortable working with vue 2: http://codepen.io/kminek/pen/pEdmoo - maybe it will help to upgrade this plugin :)

alan-andrade commented 7 years ago

@kminek your fix worked for me. Thank you.

websanova commented 7 years ago

Can this fix be pushed up to npm?

FrankFang commented 7 years ago

Hey guys, the code is so simple, just put this shit into your project and get it work for Vue 2:

import Vue from 'vue'
import Sortable from 'sortablejs'

Vue.directive('sortable', {
  inserted: function (el, binding) {
    new Sortable(el, binding.value || {})
  }
})

Why bother to introduce another lib? Right?

And remember to add keys for your items: https://github.com/vuejs/vue/issues/4085#issuecomment-257673656

Full example by @Ivannnnn

https://jsfiddle.net/1khq32ed/10/

Ivannnnn commented 7 years ago

Full example: https://jsfiddle.net/1khq32ed/10/

ItsRD commented 7 years ago

Any of you have the following problem? __WEBPACK_IMPORTED_MODULE_1_vue_sortable___default.a is not a constructor

fernandomm commented 7 years ago

@ItsRD I'm also experiencing this problem. Were you able to find a solution?

ItsRD commented 7 years ago

@fernandomm Nope, I'm still waiting for a solution..

fernandomm commented 7 years ago

@ItsRD I found the solution. I was importing vue-sortable but, as per https://github.com/sagalbot/vue-sortable/issues/10#issuecomment-272709457, only sortablejs should be imported.

ItsRD commented 7 years ago

@fernandomm aah thanks! I'll look at that! :)

ItsRD commented 7 years ago

@fernandomm just took a look at it, works perfectly! Thanks! 👍

grzegorztomasiak commented 7 years ago

Can someone explain me why solution given by FrankFang does not work for me and console.log(Sortable) returns undefined and when I change import to

import * as Sortable from 'sortablejs/Sortable.js'

then it works?

abdessamadely commented 5 years ago

Yeap! it's working now

432player commented 3 years ago

Works like Magic! Thank you for the solution