interactjs dragging

interactjs dragging

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script>
<div class="draggable">
    <input class= "text" style = "text" value = "hello "/>
    <p class="center">
  </p>
</div>

CSS

.draggable {
  /* width: 25%; */
  /* height: 100%; */
  /* min-height: 6.5em; */
  /* margin: 10%; */
  /* background-color: #29e; */
  color: black;
 
  border-radius: 0.75em;
  /* padding: 4%; */
  -webkit-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
    box-sizing: border-box;

}

.center {
  text-align: center
}
.text {
  width: fit-content;
}

JavaScript

interact('.draggable')
  .draggable({
    // enable inertial 
    inertia: true,
    
    // call  function on drap
    onmove: dragMoveListener,
    // call function on end drap
   
  })
  .resizable({
    edges: { right: true, bottom: true , left: true, top: true},
    

    
  })
  
  .on('resizemove', function (event) {
    var target = event.target;

    // update the element's style
    target.style.width  = event.rect.width + 'px';
    target.style.height = event.rect.height + 'px';
    
    
  });
  
function dragMoveListener(event) {
  var target = event.target,
    // keep the dragged position in the data-x/data-y attributes
    x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
    y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';
    target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
    /* var textEl = event.target.querySelector('p') */;
    /* textEl.textContent = x + " x " + y */;
        
    // update the posiion attributes
      target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
    
    
}
  window.dragMoveListener = dragMoveListener;