Jquery Droppable not working for file upload drag and drop, throws Error: Expected DOM element or View

Question

我一直在开发一个 https://github.com/wekan/ 分支，我试图在其中实现额外的拖放功能。开箱即用的 wekan 已经带有 labels/member 拖放，其中悬停覆盖是通过 droppable hoverClass:

完成的

    const selector = $cards.find(itemsSelector);
    selector.droppable({
      hoverClass: 'draggable-hover-card',
      accept: '.js-member,.js-label',
      'drop'(evt, ui) {
        evt.preventDefault();
        evt.stopPropagation();
        const cardId = Blaze.getData(this)._id;
        const card = Cards.findOne(cardId); //get current card I am hovering
        //stuff
      },
    });

我添加了附件拖放功能，它不会像上面的代码那样工作，并且会产生无法干净地添加 hoverClass 的问题。当我如下所示实现它时，执行 addClass 的逻辑是合理的，但我得到一个错误：

Exception from Tracker afterFlush function:
debug.js:41 Error: Expected DOM element or View
at Object.Blaze.getData (view.js:757)
at list.js:116
at Object.Tracker._runFlush (tracker.js:511)
at onGlobalMessage (setimmediate.js:102)

我想在我的代码中为我悬停在文件上的单张卡片获得 overlay/hover 功能：

    const cardId = Blaze.getData(this)._id;
    const card = Cards.findOne(cardId); //get current card I am hovering
    selector.on({'': (evt) => { //.droppable as above does not work
      evt.preventDefault(); //prevent default browser behavior
      evt.stopPropagation();
    },
    dragover(e) { // pulled out of selector.on() to add/removeClass
      e.preventDefault();
      e.stopPropagation();
      card.addClass('is-selected'); //add overlay on hover
    },
    dragenter(e) {
      e.preventDefault();
      e.stopPropagation();
    },
    dragleave(e) {
      e.preventDefault();
      e.stopPropagation();
      card.removeClass('is-selected');
    },
    drop(evt, ui) {
      card.removeClass('is-selected');
      if(!ui){ // prevent complications with other drop events
        evt.preventDefault();
        evt.stopImmediatePropagation(); // prevent x -times actions
        evt.target.files = evt.dataTransfer.files; // working file upload
        _.each(evt.dataTransfer.files, (f) => {
          const file = new FS.File(f);
          file.boardId = card.boardId;
          file.cardId = card._id;
          Attachments.insert(file);
        });}
    },
    });

当我移动时

const cardId = Blaze.getData(this)._id;
const card = Cards.findOne(cardId);

回到第一个代码块中的放置事件，try/test 例如selector.addClass('') 相反，叠加层有效，但不正确（选择器基本上 returns 整个卡片列表而不是一张卡片）。我是目前正在接受培训的新手，我无法理解我犯了什么错误。

Template.currentData() 而不是 Blaze.getData() 不起作用。当我尝试 selector.droppable() 时，我放置的文件未被接受，所有其他事件也不会触发。在尝试了不同的品种后，我很确定 Blaze.getData() 是问题所在。但是我不知道如何替换它的功能。

Answer 1

问题是我这边的语法和逻辑错误。虽然我知道 Blaze.getData() 中的 this 会指向我想要的 div，但 this.addClass() 会引发错误。所以我想我需要整个 Blaze-Block，然后导致上述问题。

正确的语法：

$(this).addClass('');

Jquery Droppable not working for file upload drag and drop, throws Error: Expected DOM element or View

Jquery Droppable not working for file upload drag and drop, throws Error: Expected DOM element or View

javascript

jquery

jquery-ui

drag-and-drop

meteor-blaze