Question

首先，我是流星/节点的新手，所以请保持温和。

我试图运行https://github.com/RubaXa/Sortable，但我无法让任何样本在本地运行。

http://jsbin.com/xizeh/2/edit?html,js,output是一个我无法上班的应用示例应用。结果如下：

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

我已尝试添加

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

只是为了获得ReferenceError: document is not defined，我认为这是因为javascript是在文档加载之前运行的。所以，我尝试将它包装在if (Meteor.isClient)中，此时页面加载，但元素不会移动/排序。控制台显示此错误：

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

我觉得流星框架本身存在问题 - 但我已经能够让所有其他示例应用程序正常工作（例如https://www.meteor.com/tutorials/blaze/creating-an-app处的应用程序运行完美）

请注意，我尝试了大量不同的Sortable示例，所有示例都具有相同的结果。它不是这个单一的应用程序。

Answer 1

根据Kyll对我的问题的评论，我能够得到链接的示例脚本（修改）：

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>

请注意，Sortable.create（）函数的第一个参数是id节点的<div>，它封装了您要进行排序的列表。

CSS：

body {
  padding: 20px;
}

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

您还必须在项目工作区中运行meteor add rubaxa:sortable，然后将rubaxa:sortable添加到<projectDIr>/.meteor/packages

在流星中运行可排序

1 个答案: