movable-area如何设置回弹到原点

Movable-area是一个CSS属性，用于定义一个元素可以移动的区域。要实现回弹到原点的效果，可以使用JavaScript来监听元素的移动事件，并在元素移动到指定位置时，将元素的位置重新设置为原点。

以下是一个示例代码：

HTML代码：

<div id="movable" style="position: absolute; left: 0; top: 0;">可移动的元素</div>

JavaScript代码：

// 获取可移动元素
var movable = document.getElementById('movable');

// 获取可移动的区域大小
var movableAreaWidth = window.innerWidth;
var movableAreaHeight = window.innerHeight;

// 监听可移动元素的mousemove事件
movable.addEventListener('mousemove', function(event) {
  var x = event.clientX;
  var y = event.clientY;
  
  // 判断元素是否超出可移动的区域
  if (x < 0 || x > movableAreaWidth || y < 0 || y > movableAreaHeight) {
    // 超出区域，将元素位置设置为原点
    movable.style.left = '0';
    movable.style.top = '0';
  }
});

以上代码会在可移动元素移动时监听mousemove事件，并判断元素是否超出可移动的区域。如果超出区域，则将元素位置设置为原点（left: 0, top: 0）。这样，可移动元素就会回弹到原点。