I'm working on a chrome extension where I'm inserting a div onto the page inside which I'm injecting an iframe which loads a react app, I want to be able to drag the div but for some reason jquery ui adds the ui-draggable class but the drag is not working
import React from "react";
import ReactDOM from "react-dom";
import Frame, { FrameContextConsumer } from "react-frame-component";
import $ from "jquery";
import { App as SideToggle } from "./SideToggle/App";
require("jquery-ui/ui/widgets/draggable");
class SideToggleContainer extends React.Component {
render() {
return (
<Frame
head={[
<link
type="text/css"
rel="stylesheet"
href={chrome.runtime.getURL("/static/css/content.css")}
></link>,
<link rel="preconnect" href={"https://fonts.googleapis.com"}></link>,
<link rel="preconnect" href={"https://fonts.gstatic.com"}></link>,
<link
rel="stylesheet"
href={
"https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@200;400;600&family=Merriweather:ital,wght@0,400;1,700&family=Roboto+Mono:ital,wght@0,400;1,700&display=swap"
}
></link>,
]}
>
<FrameContextConsumer>
{({ document, window }) => {
return (
<SideToggle
chrome={chrome}
iframeDocument={document}
iframeWindow={window}
isExt={true}
/>
);
}}
</FrameContextConsumer>
</Frame>
);
}
}
const sideToggleContainer = document.createElement("div");
sideToggleContainer.id = "side-toggle-iframe-container";
document.body.appendChild(sideToggleContainer);
ReactDOM.render(<SideToggleContainer />, sideToggleContainer);
$("#side-toggle-iframe-container").draggable({
handle: "#notealy-side-toggle-iframe-container",
axis: "y",
containment: "window"
});