拖放的实现:

  • 需求:现有一组课程,按自己意愿手动进行排序,最后得到排序完的课程。
  • 设计:每个课程都作为一个div,手动排序,切换每个div的位置。
  • 实现:更改选中元素的位置,将其与目标元素(需要切换的元素)交换。

拖放该咋实现(先吸收一下基本概念)?

  H5提供了一个全局属性:draggable(枚举类型),其全局指代了document对象和各个element,给需要拖拽的元素添加该属性,并设置为true,那剩下的事情就交给我们的事件监听就行了。具体可以了解HTML拖放相关的理论

拖放事件

  1. 源对象(被拖放的元素):

    • dragstart:开始拖放。
    • drag:拖放过程中。
    • dragend:拖放结束。
  2. 过程对象(在拖放过程中被经过的元素):

    • dragenter:开始进入。
    • dragover:移动中。
    • dragleave:最终离开。
  3. 目标对象(源对象最终归属地):

    • drop:最终的归属地。

    上述事件的简单实现(详细的见simple.html)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <div class="drag" id="source" draggable="true">源对象</div>
    <div class="drag" id="process">过程对象</div>
    <div class="drag" id="target">目标对象</div>

    <script>
    const source = document.getElementById('source'),
    process = document.getElementById('process'),
    target = document.getElementById('target');

    source.addEventListener('dragstart', e => console.log('源对象开始被拖动'));

    source.addEventListener('drag', e => console.log('源对象正在拖放中'));

    process.addEventListener('dragenter', e => console.log('源对象经过过程对象'));

    process.addEventListener('dragover', e => console.log('源对象在过程对象中移动'));

    process.addEventListener('dragleave', e => console.log('源对象离开过程对象'));

    target.addEventListener('drop', e => console.log('源对象到达目标元素'));

    source.addEventListener('dragend', e => console.log('源对象拖放结束'));

    // 此时需要阻止其默认事件,否则drop事件不会执行。
    // 你心中是不是有个黑人问号❓这么做的理由是什么?
    // 那好,当告诉你当前的默认事件是无法将元素放置到其他元素中或者其他元素拥有点击、跳转等事件,你是否解惑了!
    document.ondragover = e => e.preventDefault();

    </script>

dataTransfer对象

一个比较重要的对象,其在拖放中充当着数据与行为的媒介,其有着少许的属性和方法

属性

  • dropEffect:拖放的视觉效果,必须用在effectAllowed指定的视觉效果范围内,值有:none、copy、link、move

  • effectAllowed:指定源对象被拖放时允许的视觉效果,值有:none、copy、copyLink、copyMove、link、linkMove、all、uninitialize

  • files:返回被拖放的文件的列表。

  • types:数据的MIME类型。

方法

  • setData:向dataTransfer对象存入数据,传入两个参数,前者数据种类,后者为需要存储的数据。

    1. text/plain: 纯文本
    2. text/html: html文本
    3. text/xml: xml文本
    4. text/uri-list: url列表
  • getData:从dataTransfer对象读取数据,参数为数据种类

  • clearData:清除dataTransfer对象中的数据。

  • setDragImage:用图片设置拖放的图标。传入三个参数,第一是图片资源,第二是图片距离鼠标指针的x轴偏移量,第三是图片距离鼠标指针y轴偏移量。

接下来的事就是根据需求,在其事件的始终进行控制其数据及样式的转换,详细代码general.html