CODEWITHSUNDEEP
javascriptmeteorrubaxa-sortable
Gripp
Gripp

Reputation: 166

Running Sortable in Meteor

First, I'm brand new to meteor/node, so please be gentle.

I'm trying to run https://github.com/RubaXa/Sortable but I can't get any of the samples to run locally.

http://jsbin.com/xizeh/2/edit?html,js,output being one suck example app that I can't get to work. It results in this:

W20151202-10:36:50.714(-6)? (STDERR) 
W20151202-10:36:50.714(-6)? (STDERR) ~/.meteor/packages/meteor-tool/.1.1.10.1b51q9m++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:245
W20151202-10:36:50.714(-6)? (STDERR)                        throw(ex);
W20151202-10:36:50.714(-6)? (STDERR)                              ^
W20151202-10:36:50.717(-6)? (STDERR) ReferenceError: sortTrue is not defined
W20151202-10:36:50.717(-6)? (STDERR)     at hello.js:2:17
W20151202-10:36:50.717(-6)? (STDERR)     at ~/IdeaProjects/meteor_test_project/.meteor/local/build/programs/server/app/hello.js:22:4
W20151202-10:36:50.717(-6)? (STDERR)     at ~/IdeaProjects/meteor_test_project/.meteor/local/build/programs/server/boot.js:242:10
W20151202-10:36:50.718(-6)? (STDERR)     at Array.forEach (native)
W20151202-10:36:50.718(-6)? (STDERR)     at Function._.each._.forEach (~/.meteor/packages/meteor-tool/.1.1.10.1b51q9m++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
W20151202-10:36:50.718(-6)? (STDERR)     at ~/IdeaProjects/meteor_test_project/.meteor/local/build/programs/server/boot.js:137:5
=> Exited with code: 8

I've tried adding 

var sortTrue = document.getElementById("sortTrue");
var sortFalse = document.getElementById("sortFalse");

only to get ReferenceError: document is not defined which I think happens because the javascript is ran prior to the document being loaded. So, I tried wrapping it in if (Meteor.isClient) at which point the page load, but the elements wont move/sort. The console shows this error:

Uncaught Sortable: `el` must be HTMLElement, and not [object Null]
    Sortable @ rubaxa_sortable.js:216
    Sortable.create @ rubaxa_sortable.js:1281
    (anonymous function) @ hello.js:15
    (anonymous function) @ hello.js:28

Seems to me that the meteor framework itself is having a problem - but I've been able to get all other sample apps to work (e.g. the one at https://www.meteor.com/tutorials/blaze/creating-an-app runs perfectly)

Note that I've tried a ton of different Sortable examples, all with the same results. It's not this single app.

Upvotes: 0

Views: 1524

Answers (1)

Gripp
Gripp

Reputation: 166

Based on Kyll's comment on my question I was able to get the linked example working with Script (modified):

if (Meteor.isClient) {
    Template.body.onRendered(function(){
    // sort: true
        Sortable.create(sortTrue, {
            group: "sorting",
            sort: true
        });

    // sort: false
        Sortable.create(sortFalse, {
            group: "sorting",
            sort: false
        });
    })

}

Meteor HTML:

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>


  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>


  <!-- Latest Sortable -->
  <script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>


  <!-- sort: true -->
  <div id="sortTrue" class="list-group">
    <div class="list-group-item">foo</div>
    <div class="list-group-item">bar</div>
    <div class="list-group-item">baz</div>
  </div>


  <!-- sort: false -->
  <div id="sortFalse" class="list-group">
    <div class="list-group-item">qux</div>
    <div class="list-group-item">quux</div>
  </div>


</body>

Note here that the first argument of the Sortable.create() function is the id of the <div> node which encapsulates the list which you want to make sortable.

CSS:

body {
  padding: 20px;
}

.list-group-item {
  cursor: move;
  cursor: -webkit-grabbing;
}

You also have to run meteor add rubaxa:sortable in the project workspace, and then add rubaxa:sortable to <projectDIr>/.meteor/packages

Upvotes: 1

Related Questions