Comments (16)
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
from vue-sortable.
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.
@ItsRD I found the solution. I was importing vue-sortable but, as per #10 (comment), only sortablejs should be imported.
from vue-sortable.
Any of you have the following problem? __WEBPACK_IMPORTED_MODULE_1_vue_sortable___default.a is not a constructor
from vue-sortable.
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.
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.
Can this fix be pushed up to npm?
from vue-sortable.
Full example:
https://jsfiddle.net/1khq32ed/10/
from vue-sortable.
@kminek your fix worked for me. Thank you.
from vue-sortable.
@ItsRD I'm also experiencing this problem. Were you able to find a solution?
from vue-sortable.
@fernandomm Nope, I'm still waiting for a solution..
from vue-sortable.
@fernandomm aah thanks! I'll look at that! :)
from vue-sortable.
@fernandomm just took a look at it, works perfectly! Thanks! 👍
from vue-sortable.
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.
Yeap! it's working now
from vue-sortable.
Works like Magic!
Thank you for the solution
from vue-sortable.
Related Issues (20)
- Only sorts the DOM, doesn't sort the Vue data HOT 1
- Can it sort and drag part of a list? HOT 3
- Multiple lists HOT 4
- when drag end,it will open a new tab in some browser
- Sorting between multiple groups and get necessary data to save in DB
- the param of directive is responsive?
- Nested / Tree
- Bug when replacing last item in v-for [vue 1.0.13] HOT 3
- still issue with vue 2.0 HOT 3
- How to use it in vue-cil HOT 7
- onUpdate event does not run on Chrome 62 HOT 5
- Error in directive sortable bind hook: "Sortable: `el` must be HTMLElement, and not [object Undefined]" HOT 6
- Will v-sortable work with v-flex?
- Error in directive sortable bind hook: "TypeError: Cannot read property 'querySelector' of null HOT 1
- Sort table rows
- Error when trying to initialize the directive HOT 3
- React JS - Sortable: `el` must be an HTMLElement, not [object Null]
- Sorting and reordering array
- Sortable is not a constructor HOT 2
- Suggestion: Not using build tools should not force you to use globals
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-sortable.