全栈的自我修养 ———— js中的拖拽api

一、实现目标

二、过程

1、html实现

第一步

创建一个container的拖拽区域，左边准备放课程，然后给每一个div设置同一个draggable为truetrue，即允许拖拽

第二步

然后创建两个table里面的格子分布如下所示

js实现

    <script>
    // container是可拖拽区域，超出这个范围无效
        const container = document.querySelector('.container');
	// 获得那两个table
        const table = document.querySelectorAll('.table')
        // 拖拽开始位置
        container.ondragstart = (e) => {
     
        	// 图表示拖拽
            e.dataTransfer.effectAllowed = 'move';
            // 将拖拽的文本内容设置在拖拽的参数里面
            e.dataTransfer.setData('text'