拖放Javascript if语句问题

// 获取拖动的元素
var draggableElement = document.getElementById("draggable");

// 添加拖动事件监听器
draggableElement.addEventListener("dragstart", function(event) {
  // 判断拖动的元素是否符合条件
  if (draggableElement.classList.contains("valid")) {
    // 如果符合条件，设置拖动的数据
    event.dataTransfer.setData("text/plain", draggableElement.id);
  } else {
    // 如果不符合条件，取消拖动操作
    event.preventDefault();
  }
});

// 添加放置事件监听器
var droppableElement = document.getElementById("droppable");
droppableElement.addEventListener("drop", function(event) {
  // 阻止默认的放置行为
  event.preventDefault();

  // 获取拖动的数据
  var data = event.dataTransfer.getData("text/plain");

  // 判断放置的位置是否符合条件
  if (droppableElement.classList.contains("valid")) {
    // 如果符合条件，将拖动的元素放置到目标位置
    var draggableElement = document.getElementById(data);
    droppableElement.appendChild(draggableElement);
  }
});

// 添加放置目标的进入和离开事件监听器
droppableElement.addEventListener("dragenter", function(event) {
  // 判断放置的位置是否符合条件
  if (droppableElement.classList.contains("valid")) {
    // 如果符合条件，添加一个样式来表示可放置
    droppableElement.classList.add("highlight");
  }
});

droppableElement.addEventListener("dragleave", function(event) {
  // 移除表示可放置的样式
  droppableElement.classList.remove("highlight");
});