Javascript jQuery触发器onDrop事件反应节点

是否有任何已知的方法可以通过jQuery从React触发drop事件

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

到目前为止，我尝试了这一点，但这一事件似乎没有得到积极的回应

$(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");
    }
  });
});

---

我刚刚在React中实现了jQueryUI的拖放功能，包括.draggable和.dropable。正如您所指出的，您通常不想这样做，但有时这是完成此项工作的最佳工具

你的问题对我来说毫无意义。当.draggable jQuery托管元素被拖放到.dropable 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的变量，并将其设置为该值，以便从drop函数内部调用React方法。这是必要的，因为一旦进入jQuery的drop方法，这就有了不同的含义。

---

谢谢你这么快的回复！实际上，我只希望jQuery从外部触发事件。它应该只告诉相应的节点有一个触发的事件，带有一些数据参数。这是因为我的UI的一部分是不能替换的，它们是用jQuery编写的。所以如果我理解正确，你是说jQuery完全在React之外运行？当drop函数启动时，您希望内部的节点组件能够响应该事件并相应地采取行动？？这正是我所要寻找的！React的核心仍然只是Javascript，即使它感觉有点花哨。因此，在React组件中，您仍然可以使用标准JS向drop事件添加事件侦听器。在这里，您可以看到如何侦听drop事件：。在这里，您可以看到一个如何将其连接到React组件中的React方法/函数的示例：这也是我所理解的，但是事情变得越来越复杂，因为React的工作方式是根据内容的变化添加/删除/回收DOM元素。因此，从jQuery的角度来看，我根本不知道元素是否已完全更新，因此新元素的事件侦听器不存在