美发网站怎么做,wordpress 推广 插件,手机网站源代码,重庆企业网站开发服务目录
1. 效果展示
2. 效果分析
2.1 关键点
2.2 实现方法
3. 代码实现
3.1 html部分
3.2 css部分
3.3 js部分
3.4 完整代码
4. 总结 1. 效果展示
如图所示#xff0c;页面左侧有一个包含不同课程#xff08;如语文、数学等#xff09;的列表#xff0c;页面右侧…目录
1. 效果展示
2. 效果分析
2.1 关键点
2.2 实现方法
3. 代码实现
3.1 html部分
3.2 css部分
3.3 js部分
3.4 完整代码
4. 总结 1. 效果展示
如图所示页面左侧有一个包含不同课程如语文、数学等的列表页面右侧是一个表格表示一周内每天的不同时间段。用户可以通过拖拽左侧的课程到右侧的时间表中来安排课程。 2. 效果分析
目标鼠标摁下左侧某一科目拖拽到右侧某一位置放下拖拽的课程就会嵌入到课表框当中
2.1 关键点
(1) 拖拽与放置逻辑的实现
(2) HTML与CSS布局的设计
2.2 实现方法
(1) 将拖拽过程分为 开始拖拽、允许放置、放置三部分分析。
(2) 页面主要由两部分组成——左侧是可拖动的课程项列表右侧是一个表格用于显示每周的时间安排。每个课程项都设定了 draggable true 属性使其可以被拖动。表格中的 td 元素不包括第一列是可以放置课程的目标区域。
(3) 通过 CSS 确保页面居中显示并设置了 .box 容器的尺寸和边框。.left 和 .right 分别代表课程项列表和时间表的位置和大小。 3. 代码实现
接下来我会一步一步解说每段关键代码的含义。
3.1 html部分 div classboxdiv classleftdiv classyu draggabletrue语文/divdiv classshu draggabletrue数学/divdiv classying draggabletrue英语/divdiv classwu draggabletrue物理/divdiv classhua draggabletrue化学/divdiv classsheng draggabletrue生物/div/divdiv classrighttabletrth时间/星期/thth星期一/thth星期二/thth星期三/thth星期四/thth星期五/th/trtrtd08:00-09:00/tdtd/tdtd/tdtd/tdtd/tdtd/td/trtrtd10:00-11:00/tdtd/tdtd/tdtd/tdtd/tdtd/td/trtrtd11:00-12:00/tdtd/tdtd/tdtd/tdtd/tdtd/td/trtrtd12:00-13:00/tdtd/tdtd/tdtd/tdtd/tdtd/td/trtrtd14:00-15:00/tdtd/tdtd/tdtd/tdtd/tdtd/td/trtrtd15:00-16:00/tdtd/tdtd/tdtd/tdtd/tdtd/td/tr/table/div/div左侧是课程列表 该部分包含六个 div 元素每个元素代表一门课程如语文、数学等并赋予了 draggable true 属性这意味着这些课程项可以被拖动。
右侧是时间表提供了五个工作日周一至周五和六个上课时段的时间框架使得用户可以直观地安排每周的课程。
3.2 css部分 .left {width: 150px;display: flex;flex-direction: column;justify-content: space-between;gap: .7rem;}.left div {width: 100%;height: 50px;border: 1px solid black;text-align: center;line-height: 50px;font-weight: bold;letter-spacing: 4px;cursor: move;}.yu { background: lawngreen; }.shu { background: skyblue; }.ying { background: mediumslateblue; }.wu { background: aqua; }.hua { background: violet; }.sheng { background: navajowhite; }.right {width: 750px;height: 400px;overflow: auto;}
css部分没什么好说的按照自己的喜好随意编写即可。
3.3 js部分
const draggables document.querySelectorAll(.left div);
const droppables document.querySelectorAll(.right td:not(:first-child)); 获取所有可拖动的课程项 和 所有可放置课程的时间段单元格不包括第一列。
draggables.forEach(draggable {draggable.addEventListener(dragstart, e {e.dataTransfer.setData(text/plain, e.target.className);e.dataTransfer.dropEffect move;});});
拖拽开始:当用户开始拖动一个课程项时浏览器触发 dragstart 事件。在这个事件处理函数中我们使用 setData 方法将被拖拽元素的类名作为数据存储在 Datatransfer 对象中。同时设置drapEffect 属性为 ‘move’以表明这是一个移动操作。
droppables.forEach(droppable {droppable.addEventListener(dragover, e {e.preventDefault();e.dataTransfer.dropEffect move;});
});
允许放置 当拖拽元素经过目标单元格时浏览器会触发 dragover 事件。默认情况下浏览器会阻止这个事件所以我们需要调用 preventDefault() 来允许放置。同样地我们设置 dropEffect为 ‘move’以便与 dragstart 中的设置相匹配。
droppable.addEventListener(drop, e {e.preventDefault();const draggedItemClass e.dataTransfer.getData(text/plain);const draggedItem document.querySelector(.${draggedItemClass});if (e.target.tagName TD) {e.target.textContent draggedItem.textContent;e.target.style.backgroundColor window.getComputedStyle(draggedItem).backgroundColor;}
});
放置当用户释放鼠标按钮拖拽元素被放置到目标单元格时浏览器触发 drap 事件。在这个事件处理函数中我们获取之前存储的数据即课程项的类名找到对应的课程项并将其内容和背景颜色复制到目标单元格中。
3.4 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title拖拽实现排课/titlestylebody {margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;}.box {width: 1000px;height: 600px;border: 1px solid red;display: flex;justify-content: space-between;align-items: center;padding: 20px;box-sizing: border-box;}.left {width: 150px;display: flex;flex-direction: column;justify-content: space-between;gap: .7rem;}.left div {width: 100%;height: 50px;border: 1px solid black;text-align: center;line-height: 50px;font-weight: bold;letter-spacing: 4px;cursor: move;}.yu { background: lawngreen; }.shu { background: skyblue; }.ying { background: mediumslateblue; }.wu { background: aqua; }.hua { background: violet; }.sheng { background: navajowhite; }.right {width: 750px;height: 400px;overflow: auto;}table {width: 100%;border-collapse: collapse;}th, td {width: 120px;height: 50px;border: 1px solid black;text-align: center;}td {cursor: pointer;}/style
/head
bodydiv classboxdiv classleftdiv classyu draggabletrue语文/divdiv classshu draggabletrue数学/divdiv classying draggabletrue英语/divdiv classwu draggabletrue物理/divdiv classhua draggabletrue化学/divdiv classsheng draggabletrue生物/div/divdiv classrighttabletrth时间/星期/thth星期一/thth星期二/thth星期三/thth星期四/thth星期五/th/trtrtd08:00-09:00/tdtd/tdtd/tdtd/tdtd/tdtd/td/trtrtd10:00-11:00/tdtd/tdtd/tdtd/tdtd/tdtd/td/trtrtd11:00-12:00/tdtd/tdtd/tdtd/tdtd/tdtd/td/trtrtd12:00-13:00/tdtd/tdtd/tdtd/tdtd/tdtd/td/trtrtd14:00-15:00/tdtd/tdtd/tdtd/tdtd/tdtd/td/trtrtd15:00-16:00/tdtd/tdtd/tdtd/tdtd/tdtd/td/tr/table/div/divscript// 获取所有可拖动的课程项const draggables document.querySelectorAll(.left div);// 获取所有可放置课程的时间段单元格不包括第一列const droppables document.querySelectorAll(.right td:not(:first-child));// 添加拖拽开始事件监听器draggables.forEach(draggable {draggable.addEventListener(dragstart, e {e.dataTransfer.setData(text/plain, e.target.className);e.dataTransfer.dropEffect move;});});// 添加拖拽进入和放置事件监听器droppables.forEach(droppable {droppable.addEventListener(dragover, e {e.preventDefault();e.dataTransfer.dropEffect move;});droppable.addEventListener(drop, e {e.preventDefault();const draggedItemClass e.dataTransfer.getData(text/plain);const draggedItem document.querySelector(.${draggedItemClass});if (e.target.tagName TD) {e.target.textContent draggedItem.textContent;e.target.style.backgroundColor window.getComputedStyle(draggedItem).backgroundColor;}});});/script
/body
/html 4. 总结
以上即是实现拖拽排课动效的全部内容。如果对您有所帮助不妨点赞、关注收藏下次不迷路。
更多前端动效点击下方链接↓ ↓ ↓
前端动效_借来一夜星光的博客-CSDN博客
