Web实验十三 DOM和BOM

最新推荐文章于 2024-06-14 09:24:52 发布

烦躁的黄色汉堡诶

最新推荐文章于 2024-06-14 09:24:52 发布

阅读量239

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/m0_70331091/article/details/134917021

版权

Web实验十三 DOM和BOM

一、实验目的：

1、理解HTML DOM的节点树的基本概念

2、掌握DOM节点的访问方法

3、掌握Window对象属性和常用方法，学会利用window对象进行简单编程

二、实验内容：

1、完成以下效果的网页设计：

初始页面如下：

在这里插入图片描述

当鼠标在课程库中选择一个项时，选择的项变成灰色，并且课程库的轮廓被激活。

在这里插入图片描述

当把课程库中的项推拽到你的课程中时，你的课程的轮廓被激活，变成蓝色的轮廓如下：

在这里插入图片描述

当推拽课程的坐标在你的课程中释放时，你的课程轮廓取消激活状态，且判断是否已经存在该课程，如果有，则无任何事发生，否则将在你的课程中新增课程，如下：

在这里插入图片描述

当鼠标拽到其他区域时，不会导致你的课程中新增该课程。

三、实验代码：

<html>
  <head>
    <style>
      ul{
        list-style-type: none;
        padding:0;
        margin:0;
      }
      .area{
        border:1px solid black;
        overflow-y: scroll;
        height: 150px; width: 150px;
        border-radius: 3px;
        padding: 0px 5px;
      }
      .area:active{
        outline:2px solid black;
      }
      .userlist.active{
        outline:2px solid blue;
      }
      .dragging{opacity: 0.5;}
      .item{
        text-align: left;
      }
    </style>
  </head>
  <body>
    <table align="center" draggable="false">
      <caption>选课系统</caption>
      <tr align="center">
        <td>课程库</td>
        <td>你的课程</td>
      </tr>
      <tr>
        <td>
          <div>
            <ul class="area courselist">
              <li class="item" draggable="true">计算机网络</li>
              <li class="item" draggable="true">数据结构</li>
              <li class="item" draggable="true">Java程序设计</li>
              <li class="item" draggable="true">Web前端开发技术</li>
              <li class="item" draggable="true">JavaEE技术</li>
              <li class="item" draggable="true">计算机组成原理</li>
              <li class="item" draggable="true">离散数学</li>
              <li class="item" draggable="true">C语言程序设计</li>
              <li class="item" draggable="true">Python程序设计</li>
              <li class="item" draggable="true">软件工程</li>
              <li class="item" draggable="true">软件测试</li>
            </ul>
          </div>
        </td>
        <td align="center">	
          <div>
            <ul class="area userlist"></ul>
          </div>
        </td>
      </tr>
    </table>
    <script>
      const courseList = ['计算机网络','数据结构','Java程序设计',
        'Web前端开发技术','JavaEE技术','计算机组成原理','离散数学',
        'C语言程序设计','Python程序设计','软件工程','软件测试']
      const list = []
      
      const items = document.querySelectorAll('.item')
      const userlist = document.querySelector('.userlist')
      
      // 跟踪被拖拽项
      let draggedItem = null
      
      for (let i = 0; i < items.length; i++) {
        const item = items[i]
        
        item.addEventListener('dragstart', function(e) {
          draggedItem = item
          setTimeout(function() {
            item.classList.add('dragging')
          }, 0)
        })
        
        item.addEventListener('dragend', function(e) {
          draggedItem.classList.remove('dragging')
          draggedItem = null
        })
      }
      
      const areas = document.querySelectorAll('.area')
      
      for (let i = 0; i < areas.length; i++) {
        const area = areas[i]
        
        area.addEventListener('dragover', function(e) {
          e.preventDefault()
        })
        
        area.addEventListener('dragenter', function(e) {
          if (e.target.classList.contains('area')) {
            e.target.classList.add('active')
          }
        })
        
        area.addEventListener('dragleave', function(e) {
          if (e.target.classList.contains('area')) {
            e.target.classList.remove('active')
          }
        })
        
        area.addEventListener('drop', function(e) {
          if (e.target.classList.contains('userlist')) {
            const newItem = document.createElement('li')
            newItem.textContent = draggedItem.textContent
            
            // 判断是否已经存在该课程
            if (list.includes(newItem.textContent)) {
              return
            }
            
            list.push(newItem.textContent)
            userlist.appendChild(newItem)
          }
          
          e.target.classList.remove('active')
        })
      }
    </script>
  </body>
</html>