Question

有没有已知的方法如何通过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");
    }
  });
});

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 ，以便可以从下拉菜单中调用React方法（）功能。这是必要的，因为一旦进入jQuery的drop（）方法， this 的含义就不同了。

jQuery触发onDrop事件反应节点

1 个答案: