I have this code to generate a /draggable/ css box:
<div id="container">
<div id="box">
<style>
#box {
position: absolute;
width: 100px;
height: 100px;
background-color: #ccc;
}
</style>
<script>
window.onload = function() {
// find the element that you want to drag.
var box = document.getElementById('box');
/* listen to the touchMove event,
every time it fires, grab the location
of touch and assign it to box */
box.addEventListener('touchmove', function(e) {
// grab the location of touch
var touchLocation = e.targetTouches[0];
// assign box new coordinates based on the touch.
box.style.left = touchLocation.pageX + 'px';
box.style.top = touchLocation.pageY + 'px';
})
/* record the position of the touch
when released using touchend event.
This will be the drop position. */
box.addEventListener('touchend', function(e) {
// current box position.
var x = parseInt(box.style.left);
var y = parseInt(box.style.top);
})
}
</script>
I would like to add an html code
<iframe src="https://alceawisteria.codeberg.page/Diarykeepers_Homepage/stash/webamp.html" frameBorder="no" width=500px height=250></iframe>
into the draggable box.
(but putting it inside the ‘box div’ will just not render it.)
Is there anything I need to heed specifically to make this work ?