jQuery触发器onDrop事件react节点

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((和.dropable((实现了jQuery UI的drag-n-drop功能。正如你所指出的，你通常不想这样做，但有时这是工作的最佳工具。

你的问题对我来说并不完全有意义。当.draggable((jQuery托管的元素被拖放到.dropable((jQuery管理的Query在丢弃项目时使用的相同函数，但你想从React中调用该事件吗？？或者你只是想说你想在React中使用jQuery的drag-n-drop函数？？因为这不是一回事。我假设您只是想从React中调用jQuery的drag-n-drop功能。

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，以及可拖动和可丢弃的小部件
• 在.dropable((中，我从丢弃的元素中获取所需的值(在本例中，是roleId和userId(
• 然后我调用React函数/方法来处理这些值
• 注意我必须创建一个名为reactComponent的变量，并将其设置为this，这样我就可以从drop((函数内部调用React方法。这是必要的，因为一旦进入jQuery的drop((方法，这个就有了不同的含义