关键词:
1. draggable:规定元素是否可拖动的,draggable=true可拖动
2. dataTransfer:拖拽对象用来传递的媒介,使用方式:event.dataTransfer
3. ondragstart:拖拽元素被拖拽时触发的事件,作用于被拖拽元素
4. ondragenter:拖拽元素进入目标元素时触发的事件,作用于目标元素
5. ondragover:拖拽元素在目标元素移动触发的事件,作用于目标元素
6. ondrop:拖拽的元素在目标元素上同时鼠标放开触发的事件,作用于目标元素上
7. ondragend:拖拽完成后触发的事件,作用于被拖拽元素上
实例:
拖拽 这是一段可移动的段落,请把该段落拖入上面的矩形进行测试
rectangle.ondragover = (e) => { e.preventDefault(); }; rectangle.ondrop = (e) => { let data=e.dataTransfer.getData("Text"); e.target.appendChild(document.getElementById(data)); e.preventDefault(); }; word.ondragend = (e) => { document.getElementById('word').style.color = '#3cf078'; };