drag and drop 实现课程表拖拽功能

简介

        本文会基于html5 的drag and drop 实现课程表拖拽功能。

实现效果

技术实现

源码

function App() {

    const m = 3;
    const n = 3;
    const courses = ['语文', '数学', '英文']

    return <div style={{display: 'flex'}}>
        <div style={{
            display: 'grid',
            gridTemplateColumns: `repeat(${n}, 1fr)`,
            gridTemplateRows: `repeat(${m}, 1fr)`,
            gridGap: '10px',
            margin: '5vw 5vw',
            backgroundColor: '#f1f1f1'
        }}>
            {
                Array.from({length: m}, (row, i) => {
                    return Array.from({length: n}, (col, j) => {
                        return <div
                                    onDragOver={(e) => e.preventDefault()}
                                    onDrop={(e) => {
                                        e.preventDefault();
                                        var itemId = e.dataTransfer.getData('item-id');
                                        const nItem = document.getElementById(itemId).cloneNode(true);
                                        e.currentTarget.replaceChild(nItem, e.currentTarget.childNodes[0]);
                                    }}
                        >
                            <div key={i + '-' + j}
                                style={{ padding: '20px',backgroundColor: 'lightblue', border: '1px solid #ccc'}}
                            > {
                                courses[Math.floor(Math.random() * courses.length)]

                            }</div>
                        </div>
                    })
                })
            }

        </div>
        <div style={{margin: '5vw 5vw'}}>
            <div id="course-wuli"
                 style={{padding: '20px', width: 'fit-content', backgroundColor: 'lightblue', border: '1px solid #ccc'}}
                 draggable={true}
                 onDragStart={(e) => {
                     e.dataTransfer.setData('item-id', 'course-wuli');
                 }}
            >物理
            </div>

            <div id="course-computer"
                 style={{padding: '20px', width: 'fit-content', backgroundColor: 'lightblue', border: '1px solid #ccc'}}
                 draggable={true}
                 onDragStart={(e) => {
                     e.dataTransfer.setData('item-id', 'course-computer');
                 }}
            >电脑
            </div>
        </div>
    </div>
}

html5 drag and drop

HTML5 拖放 | 菜鸟教程

        drag and drop api 可以参考上面菜鸟文档。