原

将元素从iframe中拖拽到上层网页的任意位置。

admin web前端 暂无评论 322 浏览

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中拖拽到上层网页的任意位置。
赏
标签: