在图中实现多个可拖拽可收缩的框框（二）完

前端

2024-01-15 01:29:09

在图片上绘制可交互式 Div：实现缩放、移动和删除操作

在现代网页设计中，交互式元素变得越来越普遍，例如允许用户与图像上的特定区域进行交互的 Div。在本文中，我们将深入探讨如何在图片上绘制多个可拖拽的 Div，并为这些 Div 添加缩放、移动和删除功能。

所需知识

在开始之前，我们假设您具备以下知识：

HTML 和 CSS 基础
JavaScript 基础
jQuery 基础

实现过程

让我们分步了解如何在图片上实现交互式 Div：

1. 创建 HTML 结构

<img src="image.jpg" id="image">

我们使用一个元素来显示图片，并为其指定一个 ID。

2. 添加 CSS 样式

#image {
  width: 100%;
  height: auto;
}

.draggable {
  position: absolute;
  border: 1px solid black;
  background-color: white;
  padding: 5px;
  margin: 5px;
}

.resizable {
  resize: both;
  overflow: auto;
}

我们在 CSS 中为图像和可拖拽 Div 设置了样式。

3. 使用 jQuery 实现交互

$(function() {
  var image = $('#image');
  var draggable = $('.draggable');

  // 允许 Div 拖拽
  draggable.draggable();

  // 允许 Div 缩放
  draggable.resizable();

  // 添加一个新的 Div
  $('#add-div').click(function() {
    var newDiv = $('<div>').addClass('draggable resizable');
    newDiv.appendTo(image);
  });

  // 删除一个 Div
  $('.delete-div').click(function() {
    $(this).parent().remove();
  });
});