Following the sortable lists recipe in Meteor 1.3

help
1

Like the title mentions I’m trying to create the sortable list from this recipe in Meteor 1.3. How do I use $.sortable() with the new NPM package manager? I have tried

import { sortable } from 'html5sortable';  // is this right?

// from recipe
var initSortable = function( sortableClass ){
	let sortableList = $( sortableClass );
	sortableList.sortable( 'destroy' );  // crashes here
	sortableList.sortable();
	sortableList.sortable().off( 'sortupdate' );
	sortableList.sortable().on( 'sortupdate', () => {
		updateIndexes( '.sortable' );
	});
};

with no success.

Exception from Tracker afterFlush function:
meteor.js?hash=ec96c6f…:913 TypeError: sortableList.sortable is not a function
    at initSortable (gallery.js:5)
    at .<anonymous> (gallery.js:29)
    at blaze.js?hash=38069f4…:3331
    at Function.Template._withTemplateInstanceFunc (blaze.js?hash=38069f4…:3677)
    at fireCallbacks (blaze.js?hash=38069f4…:3327)
    at .<anonymous> (blaze.js?hash=38069f4…:3420)
    at blaze.js?hash=38069f4…:1773
    at Object.Blaze._withCurrentView (blaze.js?hash=38069f4…:2204)
    at blaze.js?hash=38069f4…:1772
    at Object.Tracker._runFlush (tracker.js?hash=b267c37…:515)

EDIT
continuing on this,

import Sortable from 'html5sortable';
console.log(Sortable);

show that Sortable is function(selector, options){...

however calling this function with the selector as an argument produced no observable results.

Does anyone have insight?

2

Probably needs to be something like:

import { sortable } from ‘html5Sortable’; the npm package is html5-sortable, but can’t use - in name in JavaScript, so I think camel case name applies.

3

thanks @nolapete, I believe that’s what I have?

4

You have html5sortable, JavaScript is case sensitive, so it’s not the same as html5Sortable.

5

ah, I tried that initially but the package is https://www.npmjs.com/package/html5sortable and lowercase

6

I’ve ran into same issue. Did you ever solve it?

Thanks!

7

Yes when using jquery extensions from npm packages follow this recipe ( for fancybox ):

var $ = require(‘jquery’);
require(‘fancybox’)($);

1 Like