js的拖拽api相关使用—以添加课表为例实践

场景：

个人记录js使用拖拽API的场景。

---

问题描述：

针对拖拽api中各种事件监听，监听对象，拖拽过程中的数据传递等。

---

原因分析：

无

解决方案：

提示：
1、dragover的时候需要使用e.preventDefault阻止默认事件，否则drop事件不生效，不允许dropdown；
2、使用dataTransform传递数据，dataTransform.effectAllowed是设置被拖动元素允许发生的拖动行为，如设置拖拽到目标元素区域时，被拖拽的元素为＋号，设置值为copy，不需要加号而是鼠标箭头时设置为‘move’；
3、监听元素可以获取一个整体，再根据target中自己添加的一些属性精确定位判断；
4、元素自定义属性设置；
5、table+thead/tbody/tfoot+colgroup/col+tr/th/td使用，colgroup用来设置单独列的宽度字体居中等，col设置具体某一列的；
6、dl/dt/dd，ol/oi（有序，标记123…）, ul/li（无序，前面为黑点）；

// react项目中实践
import { useEffect } from 'react';
import './index.css';

export default function Test1() {
    let dragTargets = [], dragBody = null, dragOrigin = null, originEle = null;
    let sourceEle = null, targetEle = null;
    // dataTransfer.setData()方法设置数据类型和数据。
    const handleDrop = (e) => {
        e.preventDefault();
        const data = e.dataTransfer.getData('text/plain');
        const cloneNode = originEle.cloneNode(true);
        console.log('drop data=> ', data, e);
        if (!e.target.childNodes.length) e.target.appendChild(cloneNode);
        e.target.classList.remove('active');
    }
    const handleDragOver = (e) => {
        e.preventDefault();
        // console.log('dragOver==>', e);
    }
    const handleDragEnter = (e) => {
        sourceEle = e.target;
        if (!e.target.childNodes.length) e.target.classList.add('active')
    }
    const handleDragLeave = (e) => {
        e.target.classList.remove('active')
    }
    const handleDragStart = (e) => {
        originEle = e.target;
        const id = e.target.dataset.id;
        e.dataTransfer.setData('text/plain', id);
    }

    useEffect(() => {
        dragTargets = document.querySelectorAll('tbody td');
        dragBody = document.querySelector('tbody');
        dragOrigin = document.querySelector('dl');

        dragOrigin.ondragstart = handleDragStart;
        dragBody.ondragover = handleDragOver;
        dragBody.ondragenter = handleDragEnter;
        dragBody.ondragleave = handleDragLeave;
        dragBody.ondrop = handleDrop;
    })
    return (
        <div className='course-table'>
            <div className='left-area'>
                <dl>
                    <dt>这是可选课程</dt>
                    <dd draggable data-id="1001">语文</dd>
                    <dd draggable data-id="1002">数学</dd>
                    <dd draggable data-id="1003">英语</dd>
                    <dd draggable data-id="1004">化学</dd>
                </dl>
            </div>
            <div className='right-area'>
                <table border="1">
                    <caption>这是一个课程表的标题</caption>
                    <colgroup>
                        <col style={{align: 'center'}} width="80" />
                        <col style={{align: 'center'}} width="80" />
                        <col style={{align: 'center'}} width="80" />
                        <col style={{align: 'center'}} width="80" />
                        <col style={{align: 'center'}} width="80" />
                        <col style={{align: 'center'}} width="80" />
                        <col style={{align: 'center'}} width="80" />
                    </colgroup>
                    <thead>
                        <tr>
                            <th>星期一</th>
                            <th>星期三</th>
                            <th>星期二</th>
                            <th>星期四</th>
                            <th>星期五</th>
                            <th>星期六</th>
                            <th>星期日</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colSpan="7">这是一个表尾</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    )
}