移动/拖动DIV

阅读时长 5 分钟读完

在前端开发中,我们经常需要实现一些交互性较强的功能,比如移动或拖动一个元素。本文将介绍如何通过JavaScript和CSS来实现移动或拖动一个DIV元素,并提供示例代码。

实现方式

1. 使用CSS3的transform属性

CSS3的transform属性可以改变一个元素的形状、大小和位置。我们可以通过设置translateX和translateY来实现移动一个元素。

接下来,我们可以通过JavaScript获取鼠标的坐标,并将其赋值给元素的translateX和translateY,从而实现移动元素的效果。

-- -------------------- ---- -------
--- --- - -------------------------------
--- ------ - ------ -- --------
--- ------- ------- -- ----

--------------------------------- ----------- -
  ------ - -----
  ------ - ------- - --------------- -- ------
  ------ - ------- - --------------
---

--------------------------------- ----------- -
  -------------------
  -- --------- -------
  --- ----- - ------- - ------- -- -----
  --- ----- - ------- - -------
  ------------------- - ------------ - ----- - ----- - ----- - ------
---

------------------------------- ---------- -
  ------ - ------
---

2. 使用HTML5的drag and drop API

HTML5引入了拖放API,可以通过它来实现拖放元素的功能。我们需要使用draggable属性将一个元素标记为可拖动的,并实现dragstart、dragover和dragend等事件。

-- -------------------- ---- -------
--- --- - -------------------------------
--- ------- ------- -- ----

--------------------------------- ----------- -
  ------ - --------- - --------------- -- ------
  ------ - --------- - --------------
---

-------------------------------- ----------- -
  -------------------
  --- ----- - --------- - ------- -- -----
  --- ----- - --------- - -------
  ------------------- - ------------ - ----- - ----- - ----- - ------
---

------------------------------- ---------- -
  ------------------- - ------------- ----
---

示例代码

CSS3方式

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  --------------------
  -------
    -----
      ------ ------
      ------- ------
      ----------------- ----
      --------- ---------
      ----- --
      ---- --
      ---------- ------------ ---
    -
  --------
-------
------
  ---- ------------------
  --------
    --- --- - -------------------------------
    --- ------ - ------
    --- ------- -------

    --------------------------------- ----------- -
      ------ - -----
      ------ - ------- - ---------------
      ------ - ------- - --------------
    ---

    --------------------------------- ----------- -
      -------------------
      -- --------- -------
      --- ----- - ------- - -------
      --- ----- - ------- - -------
      ------------------- - ------------ - ----- - ----- - ----- - ------
    ---

    ------------------------------- ---------- -
      ------ - ------
    ---
  ---------
-------
-------

HTML5拖放方式

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  --------------------
  -------
    -----
      ------ ------
      ------- ------
      ----------------- ----
      --------- ---------
      ----- --
      ---- --
      ---------- ------------ ---
    -
  --------
-------
------
  -

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------
纠错
反馈