javascript - Meteor - 用于拖放数据更改的包

Question

我有一个充满卡片的三列布局，我想这样做，以便如果用户将卡片从第 1 列拖动到第 2 列，则该卡片的数据库中名为“状态”的字段将从“切换” 1”到“2”。拖回到第 1 列会将卡的“状态”字段更改回“1”。是否有一个包或最佳实践可以用 Meteor 来解决这个问题？

Answer 1

您可以使用 jQuery UI 非常简单地完成此操作。当我们为《 meteor 行动》一书 build 冰箱时，我们正是使用了这一原理:https://github.com/meteorinaction/ch02-fridge/blob/master/myFridge/myFridge.js

您需要的是将每张卡定义为可拖动的，将列定义为可放置的容器。然后，它所需要的只是一个像每列一样的单个 block (假设您将每列放置在其自己的模板中):

Template.column2.rendered = function () {
    $('#column2').droppable({
        drop: function (evt, ui) {
            var query = {_id: $(ui.draggable).data('id')};
            var data = {$set: {status: 2}};
            Cards.update(query, data);
        }
    });
};

为了使其正常工作，您需要 jQuery UI。然后每一列都需要是一个支持可放置卡片(需要可拖动)的容器。每列都有一个 ID(此处为 column2)。实际数据在 Cards.update 行中设置。 data 变量使更新语句的处理变得更加容易。查看 chapter 2 in the github repo 的代码看看它是如何为 friend 完成的，这基本上是一个适合您的具体场景的两列示例。