Html5原生态拖动☏有关恶性事件介绍及其基本完成

2021-03-24 05:28 jianzhan

企业新项目要求，要完成每日任务卡牌不在同每日任务目录中间开展拖动完成每日任务类型的变更。因此找了一下有关文章内容，略微学习培训了一下。完成实际效果以下图。

拖动完成

关键采用的是H5内置的拖动实际效果。实际上新项目前端开发一部分是应用React撰写的，也是在应用H5完成了以后才掌握到Dan Abramov巨头有一个React-DnD部件对原生态拖动方式开展了封裝。略微学习培训了一下，较强。事后有应用到再写一篇文章开展共享。

有关恶性事件界定与使用方法

涉及到一个特性六个恶性事件。恶性事件均为H5原生态恶性事件。

特性

  • draggable：一切正常div不是容许开展拖拽的。必须加上特性draggable="true"将原素设定为可拖拽。
     

恶性事件

  • ondragstart：拖动原素恶性事件。在被拖动时被启用。
  • ondrag：拖动原素恶性事件。在原素已经被拖动时启用。
  • ondragend：拖动原素恶性事件。在拖动原素置放时启用。
  • ondragenter：置放原素恶性事件。在拖动原素进到到置放原素合理地区时启用。
  • ondragover：置放原素恶性事件。在拖动原素遮盖置放原素合理地区时启用
  • ondragleave：置放原素恶性事件。在拖动原素离去置放原素合理地区时启用。
  • ondrop：置放原素恶性事件。在拖动原素被置放在置放原素中启用。
     

基本编码完成

拖动原素有关恶性事件完成编码以下。

function handleOndragstart() {
    /*
    该恶性事件为拖动原素被拖动时启用。一般用以获得该拖动原素的唯一标志，如id等。以便捷事后数据信息升级时开展原素精准定位
     */
}

function handleOndragend() {
    /*
    该恶性事件在拖动原素被置放时启用。一般用以重设自变量实际操作
     */
}

function handleOndrag() {
    /*
    该恶性事件凭本人要求开展作用完成
     */
}

拖动原素H5编码以下

<div 
     draggable="true" 
     ondragstart="handleOndragstart()" 
     ondrag="handleOndarg()" 
     ondragend="handleOndragend()"
     >
    该原素为拖动原素
</div>

置放原素有关恶性事件完成编码以下

/*
默认设置状况下，数据信息/原素不可以置放到别的原素中。 假如要完成该作用，大家必须避免原素的默认设置解决方式。大家能够根据启用 event.preventDefault() 方式来完成 ondragover 恶性事件。
 */
function handleOndragover(event) {
    event.preventDefault();
    /*
    在这里里开展你的涵数解决
     */
}

function handleOndragenter(event) {
    event.preventDefault();
    /*
    在这里里开展你的涵数解决
     */
}

function handleOndragleave(event) {
    event.preventDefault();
    /*
    在这里里开展你的涵数解决
     */
}

function handleOndrop(event) {
    event.preventDefault();  // 消除默认设置恶性事件。drop 恶性事件的默认设置个人行为是以连接方式开启
    /*
    一般在该恶性事件中，也便是拖动原素被学会放下的情况下与后端开发开展互动开展数据信息升级
     */
}

置放原素H5编码以下

<div 
     ondragenter="handleOndragenter(event)" 
     ondragover="handleOndragover(event)" 
     ondragleave="handleOndragleave(event)" 
     ondrop=“handleOndrop(event)
     >
    该原素为置放原素
</div>

案例

下列编码可完成在2个div中间开展子原素的拖动

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>拖动完成</title>
    <style type="text/css">
      .parent {
        display: flex;
        width: 450px;
        justify-content: space-around;
      }
      .container {
        height: 300px;
        width: 200px;
        background-color: rgba(255, 255, 0, 0.3);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .box {
        width: 100px;
        height: 50px;
        background-color: rgba(255, 255, 255, 1);
      }
    </style>
    <script type="text/javascript">
      function handleOndragstart(event) {
        // 设定被拖拽的数据信息，可简易了解为设定Box的数值被拖拽原素的id。这里为"Box"
        event.dataTransfer.setData("Box", event.target.id);
      }
      function handleOndragover(event) {
        event.preventDefault();
      }
      function handleOndrop(event) {
          // 拖动原素被学会放下时启用
        event.preventDefault();
        var data = event.dataTransfer.getData("Box");
        // 将拖动原素追加到改置放原素中
        event.target.appendChild(document.getElementById(data));
      }
    </script>
  </head>

  <body>
    <div class="parent">
      <div
        class="container"
        ondragover="handleOndragover(event)"
        ondrop="handleOndrop(event)"
      >
        <div
          class="box"
          draggable="true"
          id="Box"
          ondragstart="handleOndragstart(event)"
        ></div>
      </div>
      <div
        class="container"
        ondragover="handleOndragover(event)"
        ondrop="handleOndrop(event)"
      ></div>
    </div>
  </body>
</html>

最终

临时写那么多吧。之上的案例也是用H5写的，并沒有应用React完成。之后再尝试写个React版的简易demo吧。这应当也算作我的第一篇共享文章内容，期待能坚持不懈下来。

参照连接：
https://www.jb51.net/article/154105.htm
https://www.runoob.com/try/try.php?filename=tryhtml5_draganddrop2

到此这篇有关Html5原生态拖动有关恶性事件介绍及其基本完成的文章内容就详细介绍到这了,大量有关Html5原生态拖动內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

为您推荐