Skip to content

[html] 第62天 有使用过HTML5的拖放API吗？说说你对它的理解 #275

New issue
New issue
Open
Open
[html] 第62天 有使用过HTML5的拖放API吗？说说你对它的理解#275
Labels
htmlhtml
@haizhilin2013

Description

@haizhilin2013
haizhilin2013
opened on Jun 16, 2019

第62天 有使用过HTML5的拖放API吗？说说你对它的理解

Activity

haizhilin2013
added
htmlhtml
on Jun 16, 2019
yxkhaha

yxkhaha commented on Jun 17, 2019

@yxkhaha
yxkhaha
on Jun 17, 2019
  • 图片默认自带拖拽功能，非图片元素设置draggable属性为true即可拖拽。
  • 被拖拽元素的事件：
  1. ondragstart 拖拽的一瞬间触发
  2. ondrag 拖拽期间连续触发
  3. ondragend 拖拽结束触发
  • 目标元素事件（将拖拽元素释放的地方）：
  1. ondragenter 进入目标元素触发（鼠标光标进入）
  2. ondragover 进入离开目标元素连续触发
  3. ondragleave 离开目标元素触发
  4. ondrop 在目标元素上释放鼠标触发
  • 默认状态下，一个元素不能放在另一个元素上面，需要在ondragover上阻止默认事件。
forever-z-133

forever-z-133 commented on Jun 18, 2019

@forever-z-133
forever-z-133
on Jun 18, 2019

用来做过排序，还要写临时插入，最终放手插入和数据改变。
其实相比 jqueryUI 里的 draggable 插件，我们还需要写蛮多代码的。
但这个 api 也注定不会扩充到那么强大，可能标准之初大佬们就没打算去加入那些边界判断吧。
还有一点是，他和 scroll 一样，会存在边滑动边改变 scrollTop 这类尴尬的情况。

rocky-191

rocky-191 commented on Jun 18, 2019

@rocky-191
rocky-191
on Jun 18, 2019

之前用过sortable.js来处理拖拽

Lucenova

Lucenova commented on Sep 10, 2019

@Lucenova
Lucenova
on Sep 10, 2019

jquery UI我使用过，提供的api已经差不多够用， 原生的在实现的拖拽的层面能有更大的自由度把

ducky-YFH

ducky-YFH commented on Oct 25, 2019

@ducky-YFH
ducky-YFH
on Oct 25, 2019

直接上例子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box {
      display: inline-block;
      width: 30px;
      height: 30px;
      background: pink;
    }

    .container {
      width: 200px;
      height: 200px;
      border: 1px solid rgb(72, 182, 167);
    }
  </style>
</head>

<body>
  <div class="box" draggable="true"></div>
  <div class="container"></div>
  <script>
    let box = document.querySelector(".box");
    let container = document.querySelector(".container");
    // 移动元素
    box.addEventListener("dragstart", function (e) {
      console.log("我要移动了")
      e.dataTransfer.setData("box", e.target.className);
    })
    // 目标元素
    container.addEventListener("dragenter", function () {
      console.log("你每次进入我这里都会触发");
    })
    container.addEventListener("dragover", function (e) {
      // 要阻止浏览器默认行为，不然触发不了了下面的drop事件
      e.preventDefault();
      console.log("你每次在我里面都会不停地触发");
    })
    // drop 要阻止dragover才能触发
    container.addEventListener('drop', function (e) {
      console.log("在我里面松开鼠标就会触发");
      var data = e.dataTransfer.getData("box");
      e.target.appendChild(document.getElementsByClassName(data)[0]);
    })
    container.addEventListener("dragleave", function () {
      console.log("你离开我的时候就会触发");
    })
  </script>
</body>

</html>
smile-2008

smile-2008 commented on Dec 30, 2020

@smile-2008
smile-2008
on Dec 30, 2020
  • 图片默认自带拖拽功能，非图片元素设置draggable属性为true即可拖拽。
  • 被拖拽元素的事件：
  1. ondragstart 拖拽的一瞬间触发
  2. ondrag 拖拽期间连续触发
  3. ondragend 拖拽结束触发
  • 目标元素事件（将拖拽元素释放的地方）：
  1. ondragenter 进入目标元素触发（鼠标光标进入）
  2. ondragover 进入离开目标元素连续触发
  3. ondragleave 离开目标元素触发
  4. ondrop 在目标元素上释放鼠标触发
  • 默认状态下，一个元素不能放在另一个元素上面，需要在ondragover上阻止默认事件。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    htmlhtml

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@rocky-191@forever-z-133@Lucenova

        Issue actions
          [html] 第62天 有使用过HTML5的拖放API吗？说说你对它的理解 · Issue #275 · haizlin/fe-interview