JS拖放:使带有特定类名的div不可拖放

JS拖放（Drag and Drop）是一种在前端开发中常用的技术，用于实现拖拽和放置操作。它可以使用户通过鼠标或触摸屏将元素拖拽到指定位置，并在放置时触发相应的事件处理。

在实现JS拖放功能时，可以通过设置HTML元素的draggable属性为true来使元素可拖拽。同时，可以通过添加相应的事件监听器来处理拖拽和放置的各个阶段，包括拖拽开始（dragstart）、拖拽过程（drag）、拖拽结束（dragend）、进入可放置区域（dragenter）、在可放置区域内移动（dragover）、离开可放置区域（dragleave）以及放置（drop）等。

对于要使带有特定类名的div不可拖放，可以在dragover事件中取消默认的放置行为。具体的实现代码如下：

HTML：

<div class="drag-item" draggable="true">可拖拽的元素</div>
<div class="no-drag-item">不可拖拽的元素</div>

JS：

const dragItems = document.querySelectorAll('.drag-item');

dragItems.forEach(item => {
  item.addEventListener('dragstart', e => {
    e.dataTransfer.setData('text/plain', e.target.id);
  });
});

document.addEventListener('dragover', e => {
  const draggedItem = document.getElementById(e.dataTransfer.getData('text/plain'));
  if (draggedItem.classList.contains('no-drag-item')) {
    e.preventDefault();
  }
});

在这段代码中，通过querySelectorAll选择所有带有.drag-item类名的元素，并给它们添加dragstart事件监听器，使其可拖拽。然后，在dragover事件中判断被拖拽的元素是否具有.no-drag-item类名，如果是，则通过调用preventDefault()方法取消默认的放置行为，从而实现不可拖放的效果。

JS拖放在实际应用中有很多场景，比如可以用于实现网页中的拖拽排序、拖拽上传文件、拖拽创建任务、拖拽修改布局等。如果在腾讯云的云计算环境中使用JS拖放，可以结合腾讯云的服务器less服务云函数SCF（Serverless Cloud Function）来实现拖拽上传文件到云存储COS（Cloud Object Storage）或者实现其他自定义的拖拽功能。

参考链接：