js磁性吸附

基础概念

磁性吸附（Magnetic Adsorption）是一种视觉效果，通常用于用户界面设计中，使得元素能够像磁铁一样相互吸引并自动对齐。在前端开发中，这种效果可以通过JavaScript和CSS实现，提升用户体验，尤其是在拖放操作或者布局调整时。

类型与应用场景

拖放操作的吸附：在拖动元素时，使其自动对齐到最近的网格点或其他元素。
布局编辑器的吸附：在设计工具或页面构建器中，允许用户快速对齐元素。
响应式设计辅助：在不同屏幕尺寸下，帮助元素保持整齐排列。

实现方法与示例代码

以下是一个简单的JavaScript和CSS示例，展示如何实现基本的磁性吸附效果：

HTML结构

<div id="container">
  <div class="item" style="--x: 100px; --y: 100px;"></div>
  <div class="item" style="--x: 200px; --y: 200px;"></div>
</div>

CSS样式

#container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.item {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: blue;
  transition: transform 0.2s;
}

JavaScript代码

const container = document.getElementById('container');
const items = document.querySelectorAll('.item');

container.addEventListener('mousemove', (e) => {
  items.forEach(item => {
    const rect = item.getBoundingClientRect();
    const dx = e.clientX - rect.left - rect.width / 2;
    const dy = e.clientY - rect.top - rect.height / 2;
    const distance = Math.sqrt(dx * dx + dy * dy);

    if (distance < 50) { // 吸附距离设为50px
      item.style.transform = `translate(${dx / 2}px, ${dy / 2}px)`;
    } else {
      item.style.transform = '';
    }
  });
});

container.addEventListener('mouseleave', () => {
  items.forEach(item => item.style.transform = '');
});