jQuery可拖拽Div克隆问题：拖拽后原元素保留及范围限制

嘿，我来帮你搞定这两个拖拽相关的问题！咱们一步步拆解解决：

1. 保留原元素，实现克隆拖拽 #

默认拖拽行为会直接移动原元素，所以我们要在拖拽开始时创建原元素的克隆体，把克隆体放到目标容器，让原元素留在初始位置。

你可以这样处理拖拽事件：

// 给所有Component元素绑定拖拽开始事件
document.querySelectorAll('.Component').forEach(component => {
  component.addEventListener('dragstart', function(e) {
    // 创建原元素的深克隆（包含所有子元素和属性）
    const clone = this.cloneNode(true);
    // 将克隆体的HTML存入拖拽数据，方便后续获取
    e.dataTransfer.setData('text/html', clone.outerHTML);
    // 添加拖拽时的视觉反馈（比如半透明）
    this.style.opacity = '0.5';
  });

  // 拖拽结束后恢复原元素的视觉状态
  component.addEventListener('dragend', function() {
    this.style.opacity = '1';
  });
});

// 给所有Grid容器绑定放置相关事件
document.querySelectorAll('.Grid').forEach(grid => {
  // 拖拽悬浮时允许放置（必须阻止默认行为）
  grid.addEventListener('dragover', function(e) {
    e.preventDefault();
    this.style.border = '2px dashed #333'; // 高亮目标容器
  });

  // 拖拽离开时移除高亮
  grid.addEventListener('dragleave', function() {
    this.style.border = '';
  });

  // 完成放置时添加克隆体
  grid.addEventListener('drop', function(e) {
    e.preventDefault();
    this.style.border = '';
    // 取出拖拽的克隆体HTML并转为DOM元素
    const cloneHtml = e.dataTransfer.getData('text/html');
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = cloneHtml;
    const clone = tempDiv.firstElementChild;
    // 将克隆体添加到当前Grid容器
    this.appendChild(clone);
  });
});

这样每次拖拽都会生成新的克隆体，原元素会一直留在下方的初始容器里。

2. 限制仅Component元素可放入Grid容器 #

我们需要在拖拽的关键阶段做校验，确保只有符合要求的元素能被放置：

第一步：标记可拖拽元素 #

确保所有Component元素都开启拖拽属性：

<div class="Component" draggable="true">可拖拽组件</div>

第二步：添加校验逻辑到放置事件 #

修改Grid的拖拽事件，加入类型校验：

document.querySelectorAll('.Grid').forEach(grid => {
  grid.addEventListener('dragover', function(e) {
    // 校验拖拽元素是否为Component类型
    const draggedHtml = e.dataTransfer.getData('text/html');
    const isComponent = draggedHtml.includes('class="Component"');
    
    if (isComponent) {
      e.preventDefault(); // 允许合法元素放置
      this.style.border = '2px dashed #333';
    } else {
      this.style.border = '2px dashed #ccc'; // 非法元素标记不可放置
    }
  });

  grid.addEventListener('drop', function(e) {
    e.preventDefault();
    this.style.border = '';
    const cloneHtml = e.dataTransfer.getData('text/html');
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = cloneHtml;
    const clone = tempDiv.firstElementChild;

    // 再次校验克隆体的类名，确保安全
    if (clone.classList.contains('Component')) {
      this.appendChild(clone);
    }
  });
});

现在只有类为Component的元素能被拖进Grid容器，其他元素拖拽过去不会产生任何效果。

逻辑总结 #

1. 拖拽开始时创建原元素的克隆体并保存数据
2. 拖拽悬浮时校验元素类型，仅允许合法元素放置
3. 放置完成后将克隆体添加到目标Grid容器
4. 全程保留原元素在初始位置

这样就能完美实现你想要的功能啦！

内容的提问来源于stack exchange，提问作者Brent