thuan1412/drag-drop.html

## drag-drop.html
<!DOCTYPE html>
<html>
  <head>
    <title>Iframe Example</title>
  </head>
  <body>
    <iframe
      id="inner-iframe"
      style="position: absolute; left: 500px; top: 200px; pointer-events: none"
    >
    </iframe>

    <br />
    <span draggable="true" id="textField">TextField</span>

    <script>
      const innerIframe = document.getElementById("inner-iframe");
      // add h1 to iframe
      innerIframe.contentDocument.body.innerHTML = "<h1>Drag me</h1>";

      // position of iframe
      let iframeX = innerIframe.getBoundingClientRect().x;
      let iframeY = innerIframe.getBoundingClientRect().y;

      const p = document.querySelector("#textField");
      let dragging = false;
      let lastX, lastY;

      p.addEventListener("dragstart", (event) => {
        event.dataTransfer.setData("text/plain", "component");

        dragging = true;
        console.log("dragstart");
        // const dragEvent = new DragEvent("dragenter", {
        //   bubbles: true,
        //   cancelable: true,
        //   dataTransfer: event.dataTransfer,
        // });

        // innerIframe.dispatchEvent(dragEvent);
      });
      p.addEventListener("dragend", () => {
        console.log("dragend");
        dragging = false;
      });

      window.addEventListener("mousemove", (e) => {
        console.log(dragging)
        if (!dragging) {
          return;
        }
        lastX = e.pageX;
        lastY = e.pageY;
        console.log(lastX, lastY);
        console.log(e.pageX, e.pageY);
      });

    //   innerIframe.addEventListener("dragenter", (e) => {
    //     e.preventDefault(); // prevent default browser behavior
    //     e.stopPropagation(); // stop event bubbling
    //   });

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Iframe Example</title>
	</head>
	<body>
	<iframe
	id="inner-iframe"
	style="position: absolute; left: 500px; top: 200px; pointer-events: none"
	>
	</iframe>

	<br />
	<span draggable="true" id="textField">TextField</span>

	<script>
	const innerIframe = document.getElementById("inner-iframe");
	// add h1 to iframe
	innerIframe.contentDocument.body.innerHTML = "<h1>Drag me</h1>";

	// position of iframe
	let iframeX = innerIframe.getBoundingClientRect().x;
	let iframeY = innerIframe.getBoundingClientRect().y;

	const p = document.querySelector("#textField");
	let dragging = false;
	let lastX, lastY;

	p.addEventListener("dragstart", (event) => {
	event.dataTransfer.setData("text/plain", "component");

	dragging = true;
	console.log("dragstart");
	// const dragEvent = new DragEvent("dragenter", {
	// bubbles: true,
	// cancelable: true,
	// dataTransfer: event.dataTransfer,
	// });

	// innerIframe.dispatchEvent(dragEvent);
	});
	p.addEventListener("dragend", () => {
	console.log("dragend");
	dragging = false;
	});

	window.addEventListener("mousemove", (e) => {
	console.log(dragging)
	if (!dragging) {
	return;
	}
	lastX = e.pageX;
	lastY = e.pageY;
	console.log(lastX, lastY);
	console.log(e.pageX, e.pageY);
	});

	// innerIframe.addEventListener("dragenter", (e) => {
	// e.preventDefault(); // prevent default browser behavior
	// e.stopPropagation(); // stop event bubbling
	// });

	</script>
	</body>
	</html>