Jquery Droppable 不适用于文件上传拖放，抛出错误：预期的 DOM 元素或视图

Posted 2023-05-08

【中文标题】Jquery Droppable 不适用于文件上传拖放，抛出错误：预期的 DOM 元素或视图

【英文标题】：Jquery Droppable not working for file upload drag and drop, throws Error: Expected DOM element or View

【发布时间】：2018-04-23 12:08:26

【问题描述】：

我一直在开发https://github.com/wekan/ fork，我尝试在其中实现额外的拖放功能。 开箱即用的 wekan 已经提供了标签/成员拖放功能，其中悬停覆盖是通过 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)

我的代码中我想获得一张卡片的覆盖/悬停功能，我将其悬停在一个文件上：

    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);

回到第一个代码块中的 drop 事件并尝试/测试，例如selector.addClass('') 相反，覆盖工作，但不正确（选择器基本上返回整个卡片列表而不是单个卡片）。 我是一名新手，目前正在接受培训，但我无法理解自己在犯什么错误。

---

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

【参考方案1】：

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

正确的语法：

$(this).addClass('');