Hello communitiy!
I am trying to create a website that contains drag & drop functionality. I try to do this by sending a string that contains HTML code to a HTML iFrame. I have sent HTML code successfully with other different (long and dynamically prepared) HTML strings many times before, and it worked.
At a later stage I will have to update the code using my database, corvid code, etc. to make it dynamic.
But first I am trying to get the drag&drop functionality to work.
The HTML code works fine in following cases: 1: As a standalone HTML file,
2: When copying the code fully into the HTML iFrame.
But I can not achieve the drag & drop functionality to work when the code is sent as a string to the iFrame via .postMessage
Here is the code from the corvid editor:
************************
import wixData from 'wix-data'; import wixUsers from 'wix-users'; //\ $w.onReady(function () {
let myStyle = '\ <style>\ #container {\ width: 100%;\ height: 400px;\ background-color: #ffffff;\ display: flex;\ align-items: center;\ justify-content: center;\ overflow: hidden;\ border-radius: 7px;\ touch-action: none;\ }\ .item {\ border-radius: 50%;\ touch-action: none;\ user-select: none;\ position: relative;\ }\ .one {\ width: 100px;\ height: 100px;\ background-color: rgb(245, 230, 99);\ border: 10px solid rgba(136, 136, 136, .5);\ top: 0px;\ left: 0px;\ }\ .two {\ width: 60px;\ height: 60px;\ background-color: rgba(196, 241, 190, 1);\ border: 10px solid rgba(136, 136, 136, .5);\ top: 30%;\ left: 10%;\ }\ .three {\ width: 40px;\ height: 40px;\ background-color: rgb(0, 255, 231);\ border: 10px solid rgba(136, 136, 136, .5);\ top: -40%;\ left: -10%;\ }\ .four {\ width: 80px;\ height: 80px;\ background-color: rgb(233, 210, 244);\ border: 10px solid rgba(136, 136, 136, .5);\ top: -10%;\ left: 5%;\ }\ .item:active {\ opacity: .75;\ }\ .item:hover {\ cursor: pointer;\ }\ </style>'; let myBody = '\ <body>\ <div id="outerContainer">\ <div id="container">\ <div class="item one"></div>\ <div class="item two"></div>\ <div class="item three"></div>\ <div class="item four"></div>\ </div>\ </div>\ </body>'; let myScript = '\ <script>\ var container = document.querySelector("#container");\ var activeItem = null;\ var active = false;\ container.addEventListener("touchstart", dragStart, false);\ container.addEventListener("touchend", dragEnd, false);\ container.addEventListener("touchmove", drag, false);\ container.addEventListener("mousedown", dragStart, false);\ container.addEventListener("mouseup", dragEnd, false);\ container.addEventListener("mousemove", drag, false);\ \ function dragStart(e) {\ if (e.target !== e.currentTarget) {\ active = true;\ // this is the item we are interacting with\ activeItem = e.target;\ if (activeItem !== null) {\ if (!activeItem.xOffset) {\ activeItem.xOffset = 0;\ }\ if (!activeItem.yOffset) {\ activeItem.yOffset = 0;\ }\ if (e.type === "touchstart") {\ activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;\ activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;\ } else {\ console.log("doing something!");\ activeItem.initialX = e.clientX - activeItem.xOffset;\ activeItem.initialY = e.clientY - activeItem.yOffset;\ }\ }\ }\ }\ \ function dragEnd(e) {\ if (activeItem !== null) {\ activeItem.initialX = activeItem.currentX;\ activeItem.initialY = activeItem.currentY;\ }\ active = false;\ activeItem = null;\ }\ \ function drag(e) {\ if (active) {\ if (e.type === "touchmove") {\ e.preventDefault();\ activeItem.currentX = e.touches[0].clientX - activeItem.initialX;\ activeItem.currentY = e.touches[0].clientY - activeItem.initialY;\ } else {\ activeItem.currentX = e.clientX - activeItem.initialX;\ activeItem.currentY = e.clientY - activeItem.initialY;\ }\ activeItem.xOffset = activeItem.currentX;\ activeItem.yOffset = activeItem.currentY;\ setTranslate(activeItem.currentX, activeItem.currentY, activeItem);\ }\ }\ \ function setTranslate(xPos, yPos, el) {\ el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";\ }\ </script>'; let myHtml = myStyle+myBody+myScript; console.log(myHtml); $w("#htmlStPln").postMessage(myHtml); } ); });
******************************
The HTML iframe contains the following code:
*************************
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
document.getElementById("myTab").innerHTML = event.data;
}
};
<html id="myTab"></html>
***********************
Why is the HTML code working when run completely within the HTML iframe - and not when sent as a string?
Any help is appreciated!
Thanks
Stefan
Here is the solution:
DONT write the script as a string into the .innerHtml!
The script works, when you write it into the script tag in the HTML Edit Code Box of the HTML container.4
Unfortunately like this your script can not be altered by data objects or any wix code. Example in the HTML Edit Code Box:
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
document.getElementById("myIdentifier").innerHTML = event.data;
//PLACE YOUR JS SCRIPTS AND FUNCTIONS HERE INSIDE THE SCRIPT TAG!
</script>
<html>
<div id="myIdentifier"></div>
</html>
Oh, Thanks J.D.! It never occurred to me that this could be a problem. Makes total sense. I googled a lot - but before one googles you need to know the issue! I'll find something, thanks for your time and effort. I might post a solution when I found one.
No success....
The HTML code works fine in following cases:
1: As a standalone HTML file,
2: When copying the code fully into the HTML iFrame.
Hey J.D. Thanks for your reply! I did it many times before. It usually works, but the draggability unfortunately not.
I don't think you can use document.getElementById("myTab").innerHTML in such an iframe as it's sandboxed . But maybe I'm wrong.