azophy/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo drag & drop over PDF</title>
  <script src="https://unpkg.com/interactjs/dist/interact.min.js"></script>
</head>
<body>
  <main style="margin:auto;padding:1rem;min-width:600px;max-width:1000px;background:grey">
    <h1>test pdf pdf</h1>

    <form onChange="updateStyle()">
      font size: <input type="number" id="font_size" value=14 />
      font color: <input type="color" id="font_color" value="#000">
    </form>

    <div style="position:relative;width:100%;height:80vh">
      <div style="position:absolute;width:100%;z-index:0;height:100%">
        <object data="./sampel.pdf#zoom=75" type="application/pdf" width="100%" height="1024">
          <p></p>
        </object>
      </div>
      <div style="position:absolute;z-index:10;padding:100px;width:100%;height:100%">
        <div id="placeholder" class="draggable" style="background:gray;padding:3px;width:100px">contoh</div>
      </div>
    </div>
  </main>

  <script>
  function updateStyle() {
      var font_size = document.getElementById('font_size').value;
      var font_color = document.getElementById('font_color').value;
      var placeholder = document.getElementById('placeholder')
      placeholder.style.fontSize = `${font_size}px`
      placeholder.style.color = font_color
  }
  // target elements with the "draggable" class
  interact('.draggable')
  .draggable({
    // enable inertial throwing
    // inertia: true,
    // keep the element within the area of it's parent
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        // endOnly: true
      })
    ],
    // enable autoScroll
    // autoScroll: true,

    listeners: {
      // call this function on every dragmove event
      move: dragMoveListener,

      // call this function on every dragend event
      end (event) {
        console.log(`coordinates: (${event.pageX}, ${event.pageY})`)
        /*
        var textEl = event.target.querySelector('p')

        textEl && (textEl.textContent =
          'moved a distance of ' +
          (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
                     Math.pow(event.pageY - event.y0, 2) | 0))
            .toFixed(2) + 'px')
        */
      }
    }
  })

  function dragMoveListener (event) {
    var target = event.target
    // keep the dragged position in the data-x/data-y attributes
    var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
    var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

    // translate the element
    target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'

    // update the posiion attributes
    target.setAttribute('data-x', x)
    target.setAttribute('data-y', y)

    //event.target.style.transform = `translate(${event.dx}px, ${event.dy}px)`
  }
    updateStyle();
  </script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Demo drag & drop over PDF</title>
	<script src="https://unpkg.com/interactjs/dist/interact.min.js"></script>
	</head>
	<body>
	<main style="margin:auto;padding:1rem;min-width:600px;max-width:1000px;background:grey">
	<h1>test pdf pdf</h1>

	<form onChange="updateStyle()">
	font size: <input type="number" id="font_size" value=14 />
	font color: <input type="color" id="font_color" value="#000">
	</form>

	<div style="position:relative;width:100%;height:80vh">
	<div style="position:absolute;width:100%;z-index:0;height:100%">
	<object data="./sampel.pdf#zoom=75" type="application/pdf" width="100%" height="1024">
	<p></p>
	</object>
	</div>
	<div style="position:absolute;z-index:10;padding:100px;width:100%;height:100%">
	<div id="placeholder" class="draggable" style="background:gray;padding:3px;width:100px">contoh</div>
	</div>
	</div>
	</main>

	<script>
	function updateStyle() {
	var font_size = document.getElementById('font_size').value;
	var font_color = document.getElementById('font_color').value;
	var placeholder = document.getElementById('placeholder')
	placeholder.style.fontSize = `${font_size}px`
	placeholder.style.color = font_color
	}
	// target elements with the "draggable" class
	interact('.draggable')
	.draggable({
	// enable inertial throwing
	// inertia: true,
	// keep the element within the area of it's parent
	modifiers: [
	interact.modifiers.restrictRect({
	restriction: 'parent',
	// endOnly: true
	})
	],
	// enable autoScroll
	// autoScroll: true,

	listeners: {
	// call this function on every dragmove event
	move: dragMoveListener,

	// call this function on every dragend event
	end (event) {
	console.log(`coordinates: (${event.pageX}, ${event.pageY})`)
	/*
	var textEl = event.target.querySelector('p')

	textEl && (textEl.textContent =
	'moved a distance of ' +
	(Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
	Math.pow(event.pageY - event.y0, 2) \| 0))
	.toFixed(2) + 'px')
	*/
	}
	}
	})

	function dragMoveListener (event) {
	var target = event.target
	// keep the dragged position in the data-x/data-y attributes
	var x = (parseFloat(target.getAttribute('data-x')) \|\| 0) + event.dx
	var y = (parseFloat(target.getAttribute('data-y')) \|\| 0) + event.dy

	// translate the element
	target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'

	// update the posiion attributes
	target.setAttribute('data-x', x)
	target.setAttribute('data-y', y)

	//event.target.style.transform = `translate(${event.dx}px, ${event.dy}px)`
	}
	updateStyle();
	</script>

	</body>
	</html>