js 怎么限定拖拽范围在指定类名div的，第一层子节点范围内拖拽，第二层， 第三层，第四层无法拖拽

你可以通过以下步骤来实现这个需求：

1. 给指定类名的 div 添加一个类名，比如 `draggable-parent`。

2. 给 `draggable-parent` 内的第一层子节点添加一个类名，比如 `draggable-child-level-1`。

3. 给 `draggable-parent` 内 `draggable-child-level-1` 的子节点添加一个类名，比如 `draggable-child-level-2`。

4. 给 `draggable-parent` 内 `draggable-child-level-2` 的子节点添加一个类名，比如 `draggable-child-level-3`。

5. 给 `draggable-parent` 内 `draggable-child-level-3` 的子节点添加一个类名，比如 `draggable-child-level-4`。

6. 使用 JavaScript 监听 `draggable-child-level-1` 内所有元素的 `mousedown` 事件，当鼠标按下时开始拖拽。

7. 在拖拽过程中，使用 `event.target` 获取当前被拖拽的元素，然后使用 `element.closest(selector)` 方法找到该元素最近的符合条件的祖先元素，即 `draggable-parent`。

8. 判断被拖拽元素的祖先元素是否是 `draggable-child-level-1`，如果是，则可以继续拖拽，否则不能拖拽。

9. 同理，判断被拖拽元素的祖先元素是否是 `draggable-child-level-2`、`draggable-child-level-3`、`draggable-child-level-4`，如果是，则不能拖拽。

10. 在拖拽结束时，取消拖拽事件的监听。

示例代码如下：

const draggableParent = document.querySelector('.draggable-parent');
const draggableChildLevel1 = document.querySelectorAll('.draggable-child-level-1 *');
const draggableChildLevel2 = document.querySelectorAll('.draggable-child-level-2 *');
const draggableChildLevel3 = document.querySelectorAll('.draggable-child-level-3 *');
const draggableChildLevel4 = document.querySelectorAll('.draggable-child-level-4 *');

draggableChildLevel1.forEach(element => {
  element.addEventListener('mousedown', handleDragStart);
});

function handleDragStart(event) {
  const target = event.target;
  const draggableAncestor = target.closest('.draggable-parent');

  if (draggableAncestor.classList.contains('draggable-child-level-1')) {
    // 可以拖拽
  } else if (draggableAncestor.classList.contains('draggable-child-level-2') ||
             draggableAncestor.classList.contains('draggable-child-level-3') ||
             draggableAncestor.classList.contains('draggable-child-level-4')) {
    // 不能拖拽
    event.preventDefault();
  }
}

document.addEventListener('mouseup', handleDragEnd);

function handleDragEnd(event) {
  draggableChildLevel1.forEach(element => {
    element.removeEventListener('mousedown', handleDragStart);
  });
}