# Component Drag and drop is not working on Windows 10 and works fine on macOS

**URL:** <https://forum.builder.io/t/component-drag-and-drop-is-not-working-on-windows-10-and-works-fine-on-macos/3161>\
**Category:** Visual Editor Help\
**Tags:** visual-editor, react\
**Created:** [January 25, 2023, 4:47pm UTC](https://forum.builder.io/t/component-drag-and-drop-is-not-working-on-windows-10-and-works-fine-on-macos/3161 "2023-01-25T16:47:19Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Afroz\_tekconnect](https://avatars.discourse-cdn.com/v4/letter/a/da6949/32.png) [@Afroz\_tekconnect](https://forum.builder.io/u/Afroz_tekconnect)\
**Post date:** [January 25, 2023, 4:47pm UTC](https://forum.builder.io/t/component-drag-and-drop-is-not-working-on-windows-10-and-works-fine-on-macos/3161/1 "2023-01-25T16:47:19Z")

</div>

I am unable to drag and drop components in Visual editor when I login to [builder.io](http://builder.io) using my account on Windows 10. When I login with the same account on macOS, it works fine. I have integrated [builder.io](http://builder.io) with react app using the steps mentioned in the given in the link below:  
[Integrating Pages - Builder.io](https://www.builder.io/c/docs/integrating-builder-pages#create)

Windows: Windows 10 Home Single Language  
Chrome Version: 109.0.5414.120  
Builder content link: [Builder.io: Drag and drop Visual CMS](https://builder.io/content/3e06cfab0a9c4205b5cb4b94330c5f26)  
Builder public api key: 45fae5d593414a1c85ab7b8c2a938004  
Subscription: Enterprise  
Code stack you are integrating Builder with: react

 ![Builder.io_Content_window10](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/d1256a39e605d5d88108d587727a265956ca17e7.png)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 25, 2023, 4:59pm UTC](https://forum.builder.io/t/component-drag-and-drop-is-not-working-on-windows-10-and-works-fine-on-macos/3161/2 "2023-01-25T16:59:03Z")

</div>

Hi @Afroz_tekconnect,

Welcome to the [builder.io](http://builder.io) forum.

Are you using any chrome browser plugins for VPN, add-blocker, etc?

Could you try using any other browser? Also, you can try adding the [builder.io](http://builder.io) chrome extension and see if that makes any difference.

> **[Builder Chrome extension - Builder.io](https://www.builder.io/c/docs/chrome-extension)**
>
> Build and optimize digital experiences for any tech stack, visually.

> **[Builder.io](https://chrome.google.com/webstore/detail/builderio/cfldfgibklhmjhnkfighkbafbkbfcmij)**
>
> Builder.io chrome extension

---

<div class="post-metadata">

**Author:** ![Afroz\_tekconnect](https://avatars.discourse-cdn.com/v4/letter/a/da6949/32.png) [@Afroz\_tekconnect](https://forum.builder.io/u/Afroz_tekconnect)\
**Post date:** [January 25, 2023, 7:12pm UTC](https://forum.builder.io/t/component-drag-and-drop-is-not-working-on-windows-10-and-works-fine-on-macos/3161/3 "2023-01-25T19:12:15Z")

</div>

Thanks Manish for your response. I followed the step mentioned and installed the extension but still unable to drag and drop the component.  
Also, I tried on Microsoft Edge and Firefox but it doesn’t work even there.

 ![Extension_OutlineEnabled](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/1/15b8c261bfd1a5f3427d80cf600a87ed72bada35.png)  
 ![ClickEditButton](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/1/148b53aead8159c2a97a63ca78f0ce4077e24df1.png)  
 ![BacktoAllContent_buttonClick](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/3/38ce08040ca281a41c63eeace9bfdcf7064fa2b1.png)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 25, 2023, 7:33pm UTC](https://forum.builder.io/t/component-drag-and-drop-is-not-working-on-windows-10-and-works-fine-on-macos/3161/4 "2023-01-25T19:33:50Z")

</div>

Hi @Afroz_tekconnect,

Could you please share the code for react integration?

> **[Integrating Pages - Builder.io](https://www.builder.io/c/docs/integrating-builder-pages#:~:text=Add%20a%20Builder%20component%20to%20your%20app)**
>
> Build and optimize digital experiences for any tech stack, visually.

---

<div class="post-metadata">

**Author:** ![Afroz\_tekconnect](https://avatars.discourse-cdn.com/v4/letter/a/da6949/32.png) [@Afroz\_tekconnect](https://forum.builder.io/u/Afroz_tekconnect)\
**Post date:** [January 26, 2023, 9:10am UTC](https://forum.builder.io/t/component-drag-and-drop-is-not-working-on-windows-10-and-works-fine-on-macos/3161/5 "2023-01-26T09:10:44Z")

</div>

I have created a sample react app and only App.js was modified for the integration with [builder.io](http://builder.io). Also dependency for [builder.io](http://builder.io) was added in the package.json. Please refer the code below:

App.js

```auto
//import logo from './logo.svg';
//import './App.css';

import { useEffect, useState } from "react";
import { BuilderComponent, builder, useIsPreviewing } from "@builder.io/react";

builder.init('API_KEY'); //Intentionally removed my API key

// set whether you're using the Visual Editor,
// whether there are changes,
// and render the content if found
export default function CatchAllRoute() {
  const isPreviewingInBuilder = useIsPreviewing();
  const [notFound, setNotFound] = useState(false);
  const [content, setContent] = useState(null);

  // get the page content from Builder
  useEffect(() => {
    async function fetchContent() {
      const content = await builder
        .get("page", {
          url: window.location.pathname
        })
        .promise();

      setContent(content);
      setNotFound(!content);
    }
    fetchContent();
  }, [window.location.pathname]);
  
  // If no page is found, return 
  // a 404 page from your code.
  // The following hypothetical 
  // <FourOhFour> is placeholder.
  
  /*if (notFound && !isPreviewingInBuilder) {
    return <FourOhFour/>
  }*/

  // return the page when found
  return (
    <>
      <head>
        <title>{content?.data.title}</title>
      </head>
      {/ Render the Builder page /}
      <BuilderComponent model="page" content={content} />
    </>
  );
}

```

package.json:

```auto
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@builder.io/react": "^2.0.12",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

```

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 27, 2023, 1:50pm UTC](https://forum.builder.io/t/component-drag-and-drop-is-not-working-on-windows-10-and-works-fine-on-macos/3161/6 "2023-01-27T13:50:08Z")

</div>

Hi @Afroz_tekconnect,

I think the issue could be because of the browser version you are using, as per my findings, on your Windows system, you are using the below version of the browser

Chrome: **109.0.0.0**  
Firefox: **84.0**

And the latest version which is available  
Chrome: **109.0.5414.119**  
Firefox: **109.0**

```auto
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

```

You can use [https://browserl.ist](https://browserl.ist/?q=%3E+0.2%25%2C+not+dead%2C+not+op_mini+all) to see the browsers supported by your configured `browserslist`

And browsers used in development are:

- The latest version of Chrome _or_ Firefox _or_ Safari.

Could you please try to update both browsers to the latest version and see if that fixes the issue.?

---

<div class="post-metadata">

**Author:** ![Afroz\_tekconnect](https://avatars.discourse-cdn.com/v4/letter/a/da6949/32.png) [@Afroz\_tekconnect](https://forum.builder.io/u/Afroz_tekconnect)\
**Post date:** [January 27, 2023, 2:41pm UTC](https://forum.builder.io/t/component-drag-and-drop-is-not-working-on-windows-10-and-works-fine-on-macos/3161/7 "2023-01-27T14:41:58Z")

</div>

Hi Manish,

I am already on latest version of Chrome and Firefox.

 ![Chrome_latest_version](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/1/1e5429b5cfe419d48ed9a737a84018a1c7883b05.png)  
 ![Firefox_latest_version](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/0/0e6fa445565315bb59d46deb4fb3b2d1a25fa79b.png)

Thanks!

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 30, 2023, 3:23pm UTC](https://forum.builder.io/t/component-drag-and-drop-is-not-working-on-windows-10-and-works-fine-on-macos/3161/8 "2023-01-30T15:23:41Z")

</div>

Hi @Afroz_tekconnect ,

I’m not entirely sure what’s going wrong because you are running this on localhost, have you tried fresh nextjs setup on windows yet?