如何修改这个超文本标记语言和JavaScript，使其在网页上提供多个可移动的项目？

<div id="container"></div>

var container = document.getElementById("container");

// 创建可移动的项目
var project1 = document.createElement("div");
project1.className = "project";
project1.innerHTML = "项目1";

var project2 = document.createElement("div");
project2.className = "project";
project2.innerHTML = "项目2";

// 将项目添加到容器中
container.appendChild(project1);
container.appendChild(project2);

// 为项目添加拖拽功能
project1.addEventListener("mousedown", dragStart);
project2.addEventListener("mousedown", dragStart);

function dragStart(event) {
  var project = event.target;
  var offsetX = event.clientX - project.offsetLeft;
  var offsetY = event.clientY - project.offsetTop;

  document.addEventListener("mousemove", drag);
  document.addEventListener("mouseup", dragEnd);

  function drag(event) {
    project.style.left = event.clientX - offsetX + "px";
    project.style.top = event.clientY - offsetY + "px";
  }

  function dragEnd() {
    document.removeEventListener("mousemove", drag);
    document.removeEventListener("mouseup", dragEnd);
  }
}

.project {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #f00;
  color: #fff;
  text-align: center;
  line-height: 100px;
  cursor: move;
}