Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

127
Views
JQuery ui draggable not working with div containing iframe

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"
       });
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!