Coder Social home page Coder Social logo

Comments (16)

FrankFang avatar FrankFang commented on August 25, 2024 75

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: vuejs/vue#4085 (comment)

Full example by @Ivannnnn

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

from vue-sortable.

kminek avatar kminek commented on August 25, 2024 13

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 :)

from vue-sortable.

fernandomm avatar fernandomm commented on August 25, 2024 10

@ItsRD I found the solution. I was importing vue-sortable but, as per #10 (comment), only sortablejs should be imported.

from vue-sortable.

ItsRD avatar ItsRD commented on August 25, 2024 9

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

from vue-sortable.

jasonlfunk avatar jasonlfunk commented on August 25, 2024 7

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.

from vue-sortable.

sagalbot avatar sagalbot commented on August 25, 2024 5

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.

from vue-sortable.

websanova avatar websanova commented on August 25, 2024 4

Can this fix be pushed up to npm?

from vue-sortable.

Ivannnnn avatar Ivannnnn commented on August 25, 2024 3

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

from vue-sortable.

alan-andrade avatar alan-andrade commented on August 25, 2024

@kminek your fix worked for me. Thank you.

from vue-sortable.

fernandomm avatar fernandomm commented on August 25, 2024

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

from vue-sortable.

ItsRD avatar ItsRD commented on August 25, 2024

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

from vue-sortable.

ItsRD avatar ItsRD commented on August 25, 2024

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

from vue-sortable.

ItsRD avatar ItsRD commented on August 25, 2024

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

from vue-sortable.

grzegorztomasiak avatar grzegorztomasiak commented on August 25, 2024

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?

from vue-sortable.

abdessamadely avatar abdessamadely commented on August 25, 2024

Yeap! it's working now

from vue-sortable.

432player avatar 432player commented on August 25, 2024

Works like Magic!
Thank you for the solution

from vue-sortable.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.