javascript实现了照片拖拽点击置顶的照片墙代码

下面详细讲解如何使用 JavaScript 实现照片拖拽点击置顶的照片墙代码。

步骤一：HTML模板和CSS样式的编写

首先，我们需要在 HTML 中创建照片的容器和一个置顶按钮，并为它们添加 CSS 样式。以下是示例代码：

<div id="photos-container">
  <div class="photo">
    <img src="photo1.jpg">
  </div>
  <div class="photo">
    <img src="photo2.jpg">
  </div>
  <div class="photo">
    <img src="photo3.jpg">
  </div>
</div>

<button id="top-btn">置顶</button>

#photos-container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 800px;
}

.photo {
  width: calc(33.33% - 20px);
  margin: 10px;
  position: relative;
}

.photo img {
  width: 100%;
  height: auto;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.photo img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.photo.active {
  z-index: 10;
}

#top-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  padding: 10px 20px;
  border-radius: 50%;
  border: none;
  background-color: #FFC107;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

步骤二：编写拖拽和置顶功能的 JavaScript 代码

在 JavaScript 中，我们需要为每个照片元素添加拖拽功能，以及为置顶按钮添加点击事件，当点击按钮时将选中的照片移到最顶层。

以下是示例代码：

var photos = document.querySelectorAll('.photo');
var topBtn = document.querySelector('#top-btn');

var activePhoto = null;
var initialX = null;
var initialY = null;
var xOffset = 0;
var yOffset = 0;

// 为每张照片添加拖拽功能
photos.forEach(photo => {
  photo.addEventListener('mousedown', dragStart);
  photo.addEventListener('mouseup', dragEnd);
  photo.addEventListener('mousemove', drag);
});

// 开始拖拽
function dragStart(e) {
  activePhoto = this;

  initialX = e.clientX - xOffset;
  initialY = e.clientY - yOffset;
}

// 拖拽结束
function dragEnd(e) {
  initialX = null;
  initialY = null;

  activePhoto = null;
}

// 拖拽图片
function drag(e) {
  if (activePhoto) {
    e.preventDefault();

    xOffset = e.clientX - initialX;
    yOffset = e.clientY - initialY;

    setTranslate(xOffset, yOffset, activePhoto);
  }
}

// 将图片拖拽到 newTranslate 的位置
function setTranslate(xPos, yPos, el) {
  el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
}

// 点击置顶按钮，置顶选中的照片
topBtn.addEventListener('click', () => {
  if (activePhoto) {
    activePhoto.classList.add('active');
  }
});

示例说明

此处我们来看两个操作照片墙的场景：

1. 拖拽照片

当我们点击并拖拽一张照片时，其他照片应该继续保持不变位置，而被拖拽的照片应该随着鼠标移动而移动。

photos.forEach(photo => {
  photo.addEventListener('mousedown', dragStart);  // 监听鼠标点击照片
  photo.addEventListener('mouseup', dragEnd);  // 监听鼠标松开
  photo.addEventListener('mousemove', drag);  // 监听鼠标移动
});

function dragStart(e) {
  activePhoto = this;  

  initialX = e.clientX - xOffset;
  initialY = e.clientY - yOffset;
}

function dragEnd(e) {
  initialX = null;
  initialY = null;

  activePhoto = null;
}

function drag(e) {
  if (activePhoto) {
    e.preventDefault();

    // 根据鼠标移动的距离计算出新的位置
    xOffset = e.clientX - initialX;
    yOffset = e.clientY - initialY;

    setTranslate(xOffset, yOffset, activePhoto);
  }
}

// 将照片拖拽到新的位置
function setTranslate(xPos, yPos, el) {
  el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
}

2. 置顶选中的照片

当我们点击置顶按钮时，选中的照片应该移到所有照片的最顶层。

topBtn.addEventListener('click', () => {
  if (activePhoto) {
    activePhoto.classList.add('active');  // 给选中的照片添加 'active' 类，使其置于最顶层
  }
});

以上就是整个 JavaScript 实现照片拖拽点击置顶的照片墙代码的完整攻略。