Web实验十三 DOM和BOM-CSDN博客

本文链接：https://blog.csdn.net/qq_70494538/article/details/134757390

一、实验目的：

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">
              <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>
        </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');
          var rightContainer1 = document.getElementsByClassName('area');
          //你的课程
          const rightContainer=rightContainer1[1];
          //课程库
          const borderclass=rightContainer1[0];
          let draggedItem = null;

  for (let i = 0; i < items.length; i++) {
  const item = items[i];

  //dragstart开始拖动元素或被选择的文本时调用
  item.addEventListener('dragstart', function () {
    draggedItem = item;
    setTimeout(function () {
      borderclass.style.border = 'black 1px solid';//激活课程库边框
      item.style.color = 'grey';//拖动改文字的颜色
    }, 0);
  });
//dragend拖放操作结束时触发
  item.addEventListener('dragend', function () {
    setTimeout(function () {
      item.style.color = 'black';//拖完释放后改回文字颜色
      rightContainer.style.border = 'black 2px solid';
    }, 0);
  });
}
//dragover事件在可拖动的元素或者被选择的文本被拖进一个有效的放置目标时触发。
rightContainer.addEventListener('dragover', function (e) {
  // 阻止默认行为以允许放置
  e.preventDefault();
  rightContainer.style.border = 'blue 2px solid';//激活你的课程边框
});

//drop 事件在元素或文本选择被放置到有效的放置目标上时触发
rightContainer.addEventListener('drop', function (e) {
  rightContainer.style.border = 'solid';//改回你的课程的边框颜色
  // 阻止默认行为（会作为某些元素的链接打开）
  e.preventDefault();
  const list = [];
  var newItemChildren = rightContainer.children;
  //循环得到子树的所有值
  for (var i = 0; i < newItemChildren.length; i++) {
    var elementValue;
    elementValue = newItemChildren[i].innerText;
  list.push(elementValue);
}
const newItem = document.createElement('li');
  newItem.innerText = draggedItem.innerText;
if (checkValueInArray(newItem.innerText, list)==false) {
  rightContainer.appendChild(newItem);//将newItem作为一个子节点插入到你的课程
}
});

//判断拉取的数是否在右边框中
function checkValueInArray(value, array) {
  for (var i = 0; i < array.length; i++) {
    if (array[i] == value) {
      return true;
    }
  }
  return false;
}
        </script>
    </body>
</html>