• 【H5】-- 拖拽事件

    我们需要先搭建一个这样的页面结构，实现要求：

    小方块能被拖进上面的大div里，且能再拖拽回下方 

    html：在这里我们给每一个child添加了一个draggable="true"代表元素可拖拽

    1. <body>
    2.     
    3.     <div class="parent">div>
    4.  
    5.     
    6.     
    7.     <div class="child" id="one" draggable="true">onediv>
    8.     <div class="child" id="two" draggable="true">twodiv>
    9.     <div class="child" id="three" draggable="true">threediv>
    10.     <div class="child" id="four" draggable="true">fourdiv>
    11.     <div class="child" id="five" draggable="true">fivediv>
    12. body>

    css：

    1. <style>
    2.         .parent{
    3.             height: 200px;
    4.             width: 1000px;
    5.             border: 3px solid cadetblue;
    6.         }
    7.         .child{
    8.             width: 100px;
    9.             height: 100px;
    10.             background-color: aquamarine;
    11.             color: aliceblue;
    12.             float: left;
    13.             margin: 10px 0 0 10px;
    14.         }
    15.     style>

    接下来我们要知道拖拽事件需要用到哪些知识：

    用在拖动事件上（本案例中的child）：

     用在放置事件上（本案例中的parent）：

    由于浏览器是默认不允许拖放操作的实现，因此我们可以在放置事件中设置一个：                event.preventDefault(); 将将放置元素设置为可放置。

    同上，当我们想要将拖拽元素从放置元素中拖出时，也需要给body设置一个event.preventDefault(); 使得元素可以再次拖出。

    dataTransfer:

    dataTransfer是一个用来保存拖动及放置过程中的数据的对象，可以保存一项或者多项数据，可以是一种或者多种数据类型，用于拖动拖动元素与放置元素之间的数据传递。

    这个对象可以从所有的拖拽事件 drag events 的 dataTransfer 属性上获取。

      在拖动事件中设置 dataTransfer.setData(key,value) 将拖动元素的id传出去；

    在放置事件中通过 dataTransfer.getData(key); 来获取到拖动元素中传出来的id，通过数据获取节点，放置节点。

    拖拽事件流：
    当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发
    dragstart->drag->dragenter->dragover->drop->dragend

    案例中的console.log()都是为了测试的，实际应用时可以不需要将每一条过程都打印出啦。

  • 相关阅读:
    使用element-plus 完成密码再次验证（修改密码）
    java计算机毕业设计汉字幼教系统MyBatis+系统+LW文档+源码+调试部署
    电脑老系统怎么换新系统？
    Git的基本操作以及原理介绍
    硬件设计基础----二极管
    CNN网络测试集准确率始终无法提高
    下载调试器 JTAG和SWD
    JSP中的cookie对象和Date时间类
    GLM大模型的机器翻译能力测试
    淘宝商品详情接口（商品详情页面数据接口）
  • 原文地址：https://blog.csdn.net/qq_48802092/article/details/126630709