JSFiddle - React, Tailwind, and code Playground

by Netsurfer

HTML

<div id="drag_wrap">
    <div id="hidden_helper" onmousedown="dragstart(this)">
        Jede Menge Text, sowas wie:
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
</div>

CSS

#drag_wrap {
  position:absolute;
  z-index:999;
  background:#FFF;
  color:#000;
  padding:0;
  border: solid 1px #3399ff;
  max-height:100px;
  max-width: 200px;
  overflow:auto;
}

#hidden_helper, #hidden_helper2 {
    margin: 0;
    padding: 5px;
    background-color: #95c4ea;
}

JavaScript

//Das Objekt, das gerade bewegt wird.
var dragobjekt = null;

// Position, an der das Objekt angeklickt wurde.
var dragx = 0;
var dragy = 0;

// Mausposition
var posx = 0;
var posy = 0;

var dragoverobject = null;

function draginit() {
 // Initialisierung der Ăśberwachung der Events

  document.onmousemove = drag;
  document.onmouseup = dragstop;
}

function dragstart(element) {
   //Wird aufgerufen, wenn ein Objekt bewegt werden soll.
    if(element.id == 'hidden_helper') element=document.getElementById('drag_wrap');
  //alert(element.id);
  dragobjekt = element;
  dragx = posx - dragobjekt.offsetLeft;
  dragy = posy - dragobjekt.offsetTop;
}

function dragstop() {
  //Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.

  dragobjekt = null;
}

function drag(ereignis) {
  //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.

  posx = document.all ? window.event.clientX : ereignis.pageX;
  posy = document.all ? window.event.clientY : ereignis.pageY;
  if(dragobjekt != null) {
    dragobjekt.style.left = (posx - dragx) + "px";
    dragobjekt.style.top = (posy - dragy) + "px";
  }
}