javascript - jQuery 触发 onDrop 事件 react 节点

Question

有没有已知的方法可以通过 jQuery 从 React 触发 drop 事件？

关于这个主题的文档似乎很少，一般来说，您应该避免同时使用两者，但让我们假设在这种情况下它是有意义的。

到目前为止我已经尝试过了，但该事件似乎没有在 react 端收到。

$(document).ready(function() {
  $(".draggable").draggable({
    revert: "invalid"
  });
  $(".droppable").droppable({
    accept: ".draggable",
    classes: {
      "ui-droppable-active": "ui-state-active",
      "ui-droppable-hover": "ui-state-hover"
    },
    drop: function(event, ui) {
      var event = document.createEvent("HTMLEvents");
      event.initEvent("drop", true, true);
      $(this)[0].dispatchEvent(event);
      console.log("works as designed");
    }
  });
});

Answer 1

我刚刚在 React 中使用 .draggable() 和 .droppable() 完成了 jQuery UI 的拖放功能的实现。正如您所指出的，您通常不想这样做，但有时它是完成这项工作的最佳工具。

你的问题对我来说完全没有意义。当 .draggable() jQuery 管理 元素被拖放到 .droppable() jQuery 管理 元素上时，drop 事件就会触发。因此，当你说你想“通过 jQuery 从 ReactJS 触发 drop 事件”时，你的意思是你想调用 jQuery 在删除项目时使用的相同函数，但你想要从 React 中调用该事件？或者你只是想说你想在 React 中使用 jQuery 的拖放功能？因为这些不是同一件事。我假设您只是尝试从 React 中调用 jQuery 的拖放功能。

import $ from 'jquery';
import 'jquery-ui/ui/widgets/draggable';
import 'jquery-ui/ui/widgets/droppable';
class SomeComponent extends React.Component {
    setDroppable() {
      const reactComponent = this;
      $('.roleListItems').droppable({
          drop : function(event, ui) {
              const roleId = event.target.getAttribute('roleid');
              const userId = ui.draggable[0].getAttribute('userid');
              if (!reactComponent.roleUserExists(roleId, userId)) { session.ListOfRolesCarousel.callCreateRoleUser(roleId,  userId); }
              else { reactComponent.setSelectedRoleId(roleId, true); }
          },
          tolerance : 'touch',
      });
    }
    setDraggable() {
      const grabbingCursor = this.grabbingCursor;
      $('.userListItems').draggable({
         appendTo : document.getElementById('rolesContainer'),
         helper : 'clone',
         revert : 'invalid',
         snap : '.roleListItems',
         snapMode : 'inner',
         snapTolerance : 25,
         start : function(event, ui) {
            ui.helper[0].style.cursor = grabbingCursor;
            ui.helper[0].style.width = $('#rolesContainer').width() + 'px';
         },
      });
    }
}

我在这里:

• 导入 jQuery，以及可拖放小部件
• 在 .droppable() 内，我从删除的元素中获取所需的值(在本例中为 roleId 和 userId)
• 然后我调用 React 函数/方法来处理这些值
• 注意，我必须创建一个名为 reactComponent 的变量并将其设置为 this，以便我可以从 drop 内部调用 React 方法() 功能。这是必要的，因为一旦您进入 jQuery 的 drop() 方法，this 就会有不同的含义。