dragenter 设置被拖动元素 动效

当一个元素被拖动到另一个元素上时，可以使用 `dragenter` 事件来为被拖动元素添加动效。

首先，使用 CSS 定义被拖动元素的动画效果，比如：

.dragging {
  transition: transform 0.3s ease-in-out;
}

然后在 `dragenter` 事件中，为被拖动元素添加 `dragging` 类名，触发动画效果。例如：

const draggableElement = document.querySelector('.draggable');

draggableElement.addEventListener('dragenter', () => {
  draggableElement.classList.add('dragging');
});

当被拖动元素进入目标元素时，动画效果就会被触发。当被拖动元素离开目标元素时，可以使用 `dragleave` 事件来移除 `dragging` 类名，结束动画效果。例如：

draggableElement.addEventListener('dragleave', () => {
  draggableElement.classList.remove('dragging');
});

相关问题

javascript拖拽元素互换位置，实现代码

以下是一个简单的 JavaScript 拖拽元素互换位置的实现代码，你可以根据自己的需要进行修改：

HTML 部分：

<div class="drag-container">
  <div class="drag-item" draggable="true">
    拖拽元素1
  </div>
  <div class="drag-item" draggable="true">
    拖拽元素2
  </div>
  <div class="drag-item" draggable="true">
    拖拽元素3
  </div>
</div>

CSS 部分：

.drag-container {
  display: flex;
}

.drag-item {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  background-color: #ccc;
  text-align: center;
  line-height: 100px;
  cursor: move;
}

JavaScript 部分：

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

// 获取元素距离页面左上角的距离
function getPosition(el) {
  let x = 0,
      y = 0;
  while (el !== null) {
    x += el.offsetLeft;
    y += el.offsetTop;
    el = el.offsetParent;
  }
  return { x, y };
}

// 判断两个元素是否相交
function isOverlap(el1, el2) {
  const el1Rect = el1.getBoundingClientRect();
  const el2Rect = el2.getBoundingClientRect();

  return !(
    el1Rect.bottom < el2Rect.top ||
    el1Rect.top > el2Rect.bottom ||
    el1Rect.right < el2Rect.left ||
    el1Rect.left > el2Rect.right
  );
}

// 获取拖拽元素的位置信息
function getItemPosition(item) {
  const { x, y } = getPosition(item);
  const width = item.offsetWidth;
  const height = item.offsetHeight;

  return { x, y, width, height };
}

// 交换两个元素的位置
function swapItems(item1, item2) {
  const parent = item1.parentNode;
  const temp = document.createElement('div');

  parent.insertBefore(temp, item1);
  parent.insertBefore(item1, item2);
  parent.insertBefore(item2, temp);

  parent.removeChild(temp);
}

// 拖拽事件处理函数
function handleDragStart(e) {
  dragItem = e.target;
}

function handleDragOver(e) {
  e.preventDefault();
}

function handleDragEnter(e) {
  e.preventDefault();
  if (isOverlap(dragItem, e.target)) {
    e.target.style.border = '2px dashed red';
  }
}

function handleDragLeave(e) {
  e.target.style.border = '';
}

function handleDrop(e) {
  e.preventDefault();
  e.target.style.border = '';
  if (isOverlap(dragItem, e.target)) {
    const item1 = dragItem;
    const item2 = e.target;

    swapItems(item1, item2);
  }
}

// 绑定拖拽事件监听器
dragItems.forEach(item => {
  item.addEventListener('dragstart', handleDragStart);
  item.addEventListener('dragover', handleDragOver);
  item.addEventListener('dragenter', handleDragEnter);
  item.addEventListener('dragleave', handleDragLeave);
  item.addEventListener('drop', handleDrop);
});

上述代码实现了拖拽元素的互换位置，基本思路是通过拖拽事件监听器来获取拖拽元素和目标元素的位置信息，并根据位置信息判断是否需要交换位置。交换位置时，使用一个临时元素来占位，然后将两个元素互换位置即可。

js使用draggable拖拽多个元素后，再次拖拽，移动的永远是最后一次拖拽的是元素。怀疑是preventDefault放下后，dragstart方法不生效了，没有重新赋值，一直是拖拽的是最后一个元素。

可能是因为你没有正确处理拖拽事件的绑定和元素的状态。在使用`draggable`属性进行拖拽时，需要正确设置`dragstart`、`dragover`、`dragenter`、`dragleave`、`dragend`和`drop`等事件的处理函数。

首先，确保在每个需要拖动的元素上添加`draggable="true"`属性。

然后，在拖动开始时，将当前拖动的元素保存到一个变量中，以便在后续事件中使用。你可以在`dragstart`事件中获取当前拖动的元素，并将其保存到一个全局变量中。

接下来，在`dragover`和`drop`事件中，阻止默认行为，以避免被浏览器默认处理拖拽的行为干扰。

最后，在`drop`事件中，将拖动的元素插入到目标位置，并更新元素的状态。

以下是一个示例代码，用于实现多个元素的拖拽并正确更新元素位置：

// 保存当前拖动的元素
let dragElement;

// dragstart事件处理函数
function handleDragStart(event) {
  dragElement = event.target;
}

// dragover事件处理函数
function handleDragOver(event) {
  event.preventDefault();
}

// drop事件处理函数
function handleDrop(event) {
  event.preventDefault();
  
  // 获取目标位置的元素
  const dropTarget = event.target;
  
  // 将拖动的元素插入到目标位置
  dropTarget.parentNode.insertBefore(dragElement, dropTarget.nextSibling);
  
  // 清空拖动元素
  dragElement = null;
}

// 绑定事件处理函数
const draggableElements = document.querySelectorAll('[draggable="true"]');
draggableElements.forEach(element => {
  element.addEventListener('dragstart', handleDragStart);
  element.addEventListener('dragover', handleDragOver);
  element.addEventListener('drop', handleDrop);
});

通过正确处理`dragstart`、`dragover`和`drop`等事件，可以确保拖拽多个元素后再次拖拽时移动的是正确的元素。希望这能帮到你！