CODEWITHSUNDEEP
javascriptreactjsdrag-and-dropaddeventlistenermousemove
Angelina Rozario
Angelina Rozario

Reputation: 1

Drag Element from outside of iframe to inside of the iframe document in reactJS

// App.js
import React, { useEffect } from 'react';

const App = () => {
  const handleDragStart = (e) => {
    // Add custom data to the drag event
    e.dataTransfer.setData('text/plain', 'Some data'); // Use a string to represent the data
  };

  const handleIframeLoad = (event)=>{
    let iframe = event.target;
    let frameDoc = iframe.contentWindow.document;
    frameDoc.addEventListener("mousemove",()=>{
      console.log('The mouse is moving');
    })
  }

  return (
    <div>
      <div
        draggable
        onDragStart={handleDragStart}
        style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}
      >
        Drag me
      </div>
      <iframe
        src="./Files/index.html" // Your iframe content URL
        style={{ width: '600px', height: '400px' }}
        title="Iframe"
        onLoad={handleIframeLoad}
      ></iframe>
    </div>
  );
};

export default App;

When the drag event is happening the mousemove eventlistener of the iframe document is not working. Why the two event listener are not working together. The mousemove works fine while drag event is not active. But if the dragevent starts the mousemove event stops working.

I want to drag items from parent window to the iframe document.

Upvotes: 0

Views: 23

Answers (0)

Related Questions