【JavaScript】事件 - 实现元素拖拽至画布

秀秀_heo

于 2024-10-09 15:55:54 发布

阅读量640

点赞数 23

分类专栏： JavaScript 文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/XiugongHao/article/details/142788907

版权

JavaScript 专栏收录该内容

122 篇文章 2 订阅

订阅专栏

原生实现

实现元素拖拽至画布的思路主要涉及 拖拽事件 和 画布的交互。

1. HTML 结构

需要一个可拖拽的元素和一个画布容器。画布可以是一个 div 或者 canvas，可拖拽的元素可以是 div、img 等元素。

<div class="draggable" draggable="true">Drag me</div>
<div class="canvas"></div>

2. 启用拖拽

首先为可拖拽元素启用拖拽。通过设置 draggable="true" 属性，元素可以被拖动。同时，我们需要监听相应的拖拽事件。

3. 拖拽相关事件

实现拖拽功能的关键是使用以下事件：

dragstart：当开始拖拽时触发，通常用来存储被拖拽元素的信息。
dragover：当拖拽元素在目标区域上方移动时触发，必须调用 event.preventDefault() 来允许放置。
drop：当元素被放置时触发，处理放置逻辑。

4. JavaScript 实现

以下是实现拖拽功能的核心代码：

<div class="draggable" draggable="true">Drag me</div>
<div class="canvas"></div>

<style>
  .draggable {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    cursor: grab;
  }
  
  .canvas {
    width: 400px;
    height: 400px;
    border: 1px solid black;
    margin-top: 20px;
    position: relative;
  }
</style>

<script>
  const draggable = document.querySelector('.draggable');
  const canvas = document.querySelector('.canvas');
  
  // 存储拖拽的数据
  draggable.addEventListener('dragstart', (event) => {
    event.dataTransfer.setData('text/plain', null); // 设置拖拽数据
  });

  // 允许在画布上放置元素
  canvas.addEventListener('dragover', (event) => {
    event.preventDefault(); // 必须阻止默认行为才能进行 drop
  });

  // 当元素被拖放到画布上时
  canvas.addEventListener('drop', (event) => {
    event.preventDefault();

    // 获取放置位置的坐标
    const x = event.clientX - canvas.offsetLeft;
    const y = event.clientY - canvas.offsetTop;
    
    // 克隆可拖拽元素并设置其位置
    const newElement = draggable.cloneNode(true);
    newElement.style.position = 'absolute';
    newElement.style.left = `${x}px`;
    newElement.style.top = `${y}px`;
    
    // 将新的元素添加到画布
    canvas.appendChild(newElement);
  });
</script>

5. 实现思路详解

draggable 属性：这是 HTML5 提供的拖拽功能，通过设置 draggable="true"，元素即可被拖动。
dragstart 事件：当用户开始拖动元素时，我们可以在这里存储一些信息，比如拖拽的数据。
dragover 事件：这个事件非常重要，因为它决定了拖拽元素是否能够在某个区域上方放置。通过调用 event.preventDefault()，我们告诉浏览器允许在这个区域放置元素。
drop 事件：当元素被放置到目标区域时，这个事件触发。我们在这里计算拖拽的位置，并将拖拽的元素添加到画布。

6. 扩展思路

多元素拖拽：可以支持多个元素拖拽。通过在 dragstart 中区分不同的元素数据，drop 时创建对应的元素。
保存状态：在画布上拖拽并放置后，可能需要保存当前布局（例如保存到服务器或本地存储）。
拖拽限制：可以添加逻辑来限制元素只能在特定区域内拖拽，或者拖拽到画布外部时进行回弹等处理。
自定义拖拽效果：可以修改拖拽时的视觉反馈，例如使用 dataTransfer.setDragImage() 设置自定义的拖拽图像。

1. React 实现思路

React 示例代码

import React, { useState } from 'react';
import './App.css';

const Draggable = () => {
  return (
    <div
      className="draggable"
      draggable="true"
      onDragStart={(e) => e.dataTransfer.setData('text', 'dragging')}>
      Drag me
    </div>
  );
};

const Canvas = () => {
  const [elements, setElements] = useState([]);

  const handleDrop = (e) => {
    e.preventDefault();
    const x = e.clientX - e.target.offsetLeft;
    const y = e.clientY - e.target.offsetTop;

    // 添加新元素到画布
    setElements([...elements, { x, y }]);
  };

  return (
    <div
      className="canvas"
      onDragOver={(e) => e.preventDefault()}
      onDrop={handleDrop}>
      {elements.map((elem, index) => (
        <div
          key={index}
          className="draggable"
          style={{ position: 'absolute', left: elem.x, top: elem.y }}>
          Drag me
        </div>
      ))}
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <Draggable />
      <Canvas />
    </div>
  );
}

export default App;

解释：

Draggable 组件：这是一个可以拖拽的元素，onDragStart 事件中使用 e.dataTransfer.setData 来标记该元素被拖拽。
Canvas 组件：这是拖拽目标区域。通过 onDrop 事件获取鼠标放置的位置，并在状态中保存元素的位置信息。每次拖放都会创建新的可拖动元素。
useState：用来保存放置元素的位置信息。每次放置新元素时，React 的状态更新并触发重新渲染。

CSS 样式

.draggable {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  cursor: grab;
  margin-bottom: 20px;
}

.canvas {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  position: relative;
}

Vue 实现思路

Vue 示例代码

<template>
  <div>
    <div
      class="draggable"
      draggable="true"
      @dragstart="handleDragStart">
      Drag me
    </div>
    <div
      class="canvas"
      @dragover.prevent
      @drop="handleDrop">
      <div
        v-for="(element, index) in elements"
        :key="index"
        class="draggable"
        :style="{ position: 'absolute', left: element.x + 'px', top: element.y + 'px' }">
        Drag me
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      elements: [], // 存储放置的元素位置信息
    };
  },
  methods: {
    handleDragStart(event) {
      // 可以在这里设置拖拽数据
    },
    handleDrop(event) {
      const x = event.clientX - event.target.offsetLeft;
      const y = event.clientY - event.target.offsetTop;

      // 更新元素数组，添加新元素的坐标
      this.elements.push({ x, y });
    },
  },
};
</script>

<style>
.draggable {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  cursor: grab;
  margin-bottom: 20px;
}

.canvas {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  position: relative;
}
</style>