<!DOCTYPE html>


<html>


<style>

#floating-button {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 999;

  cursor: move;

}


#floating-button img {

  display: block;

  width: 60px;

  height: 60px;

  border-radius: 50%;

  background-color: #4CAF50;

  box-shadow: 0px 2px 5px rgba(0,0,0,0.3);

}

</style>


<body>




 


<div id="floating-button">

  <img src="ruta/a/la/imagen.jpg" alt="Botón flotante">

</div>



 

 
















<script>







var floatingButton = document.getElementById('floating-button');


var isDragging = false;

var dragOffset = { x: 0, y: 0 };


floatingButton.addEventListener('mousedown', function(event) {

  isDragging = true;

  var boundingRect = floatingButton.getBoundingClientRect();

  dragOffset.x = event.clientX - boundingRect.left;

  dragOffset.y = event.clientY - boundingRect.top;

});


document.addEventListener('mousemove', function(event) {

  if (isDragging) {

    floatingButton.style.left = (event.clientX - dragOffset.x) + 'px';

    floatingButton.style.top = (event.clientY - dragOffset.y) + 'px';

  }

});


document.addEventListener('mouseup', function(event) {

  isDragging = false;

});






</script>


</body>

</html>