Question

我正在构建一个Meteor应用程序，让用户可以组织标签中的项目列表。

当用户将项目从一个标签拖动到另一个标签时，我使用jQuery draggable和droppable来更新集合。

我发现很难理解应该如何/何时/何时应该调用该函数。我尝试了一些不同的选项（包括this“hacky的做法”。The Blaze documentation提到可以在DOM事件上调用函数，但缺少我正在寻找的拖放事件因为我目前已经决定在Template.rendered下调用该函数，但这意味着该项目每次渲染只能被删除一次。我试图用Tracker.autorun来解决这个问题，但我不认为我理解它工作正常，每次渲染时仍然只能删除一次。

如何在每次渲染时多次使.item可拖动？

Template.tag.rendered = function () {
  //wait on subscriptions to load
  if (Session.get('DATA_LOADED')) {

    Tracker.autorun(function () {
      $(".item").draggable({
        revert: true,

        start: function (event, ui) {
          var movingItem = Blaze.getData(this)._id;
          Session.set('movingItem', movingItem);
        },

      });

      $(".tag").droppable({
        hoverClass: 'droppable',
        drop: function () {
          var movingItem = Session.get('movingItem');
          var acceptingTag = Blaze.getData(this)._id;
          Items.update(movingItem, {
            $set: {"parents": acceptingTag}
          });
        }
      });

    });
  }
};

Answer 1

我找到了解决方案。

通过将.draggable和.droppable分成两个不同的Template.rendered，现在每次移动一个项目时都会正确调用该函数。

不需要Tracker.autorun

Template.item.rendered = function () {
  if (Session.get('DATA_LOADED')) {

      $(".item").draggable({
        revert: true,

        start: function (event, ui) {
          var movingItem = Blaze.getData(this)._id;
          Session.set('movingItem', movingItem);
          console.log('moving ' + movingItem);
        },
      });
  }
};

Template.tag.rendered = function () {
  if (Session.get('DATA_LOADED')) {

      $(".tag").droppable({
        hoverClass: 'droppable',
        drop: function () {
          var movingItem = Session.get('movingItem');
          var acceptingTag = Blaze.getData(this)._id;
          Items.update(movingItem, {
            $set: {"parents": acceptingTag}
          });
          console.log('Dropped on ' + acceptingTag);
        }
      });
  }
};

如何更新jQuery（拖放）集合

1 个答案: