iframe代码： json
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML文档</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<div draggable='true' id="hahaha" class="box">
ddddd
</div>
<div draggable='true' id="hahaha2" class="box">
ddddd
</div>
<script>
/** Iframe code **/
//say you have this div inside your iframe that looks like this:
let elementInsideIframe = document.getElementsByClassName("box");
var arr =Array.from(elementInsideIframe);
arr.forEach(element => {
// console.log(element.id);
element.addEventListener("dragstart", event => {
//send message to parent somehow.
//usually this can be done with https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
window.parent.postMessage({'key1': element.id,'key2': 'value2'}, "*");
//The last arg can be a Transferable Object, but I haven't used this before.
//https://developer.mozilla.org/en-US/docs/Web/API/Transferable
});
//Also handle the 'dragend' event:
element.addEventListener("dragend", event => {
//send message to parent again.
const data = {
mouse:{
x: event.pageX,
y: event.pageY,
},
textPayload: 'hey man!' +element.id,
}
window.parent.postMessage(JSON.stringify(data), "*");
});
});
</script>
</body>
</html>
主页面代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML文档</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<iframe src="d1.html"></iframe>
<script>
function receiveMessage(event)
{
console.log('receiveMessage', event);
//maybe check the origin here before you look at the messages
//and confirm you trust the sender.
//Handle string messages
switch(event.data) {
case 'dragging!':
//set up a div overlay
const overlay = document.createElement("div");
overlay.className = "overlay";
overlay.innerHTML =
'<div class="text"> Drag and drop somewhere! </div>';
const domInsertionPoint = document.getElementsByClassName(
"wherever-you-want-to-insert-the-overlay"
)[0];
domInsertionPoint.appendChild(overlay);
//maybe handle some other string messages here:
default:
return;
}
//handle the data type messages
try {
const data = JSON.parse(event.data);
if (typeof data == 'object' && data.hasOwnProperty('mouse')) {
document.getElementsByClassName("overlay")[0].remove();
const syntheticEvent = new DragEvent("drop");
// Override dataTransfer first so we can define our own.
Object.defineProperty(syntheticEvent, "dataTransfer", {
value: {}
});
// Once dataTransfer is overridden, you can define getData.
syntheticEvent.dataTransfer.getData = dragFormatRequested => {
// only handling text atm.
if (["text", "text/html"].indexOf(dragFormatRequested) > -1) {
return data.textPayload;
}
};
const target = document.elementFromPoint(data.mouse.x, data.mouse.y)
Object.defineProperty(syntheticEvent, "target", {
value: target
});
target.dispatchEvent(syntheticEvent);
}
} catch(error) {
//error was probably SyntaxError for trying to parse something
//that isn't JSON.
}
}
//listen for the message from the child.
window.addEventListener("message", receiveMessage, false);
</script>
</body>
</html>
拖动过程中，按F12,打开console查看信息。
将元素从iframe中拖拽到上层网页的任意位置。