draggable 两组拖拽取消事件

好的，您的问题是如何实现两组可拖拽元素的取消事件？

首先，需要给每个可拖拽元素添加一个事件监听器，以便在拖拽开始时执行相应的操作。在这个监听器中，我们可以添加一个 `dragstart` 事件，来设置一些属性，以便在拖拽过程中使用。

例如，我们可以在 `dragstart` 事件中设置一个全局变量来存储当前正在拖拽的元素，如下所示：

let currentDraggingElement = null;

function handleDragStart(event) {
  currentDraggingElement = event.target;
  // 设置其他属性
}

接下来，我们可以为每个可拖拽元素添加一个 `dragend` 事件监听器，以便在拖拽结束时执行相应的操作。在这个监听器中，我们可以将全局变量重置为 `null`，以便其他元素可以被拖拽。

function handleDragEnd(event) {
  currentDraggingElement = null;
  // 执行其他操作
}

如果您想要取消某个元素的拖拽事件，可以在 `dragstart` 事件监听器中添加一个条件语句，来判断是否需要取消拖拽。例如，如果您希望在某些情况下禁止拖拽，可以添加一个类似于以下的代码：

function handleDragStart(event) {
  if (someCondition) {
    event.preventDefault();
    return;
  }
  currentDraggingElement = event.target;
  // 设置其他属性
}

这样，当 `someCondition` 条件为真时，拖拽将被禁用。

最后，如果您希望取消所有元素的拖拽事件，可以使用 `document.querySelectorAll` 方法选择所有可拖拽元素，并为它们添加 `dragstart` 和 `dragend` 监听器，以便在拖拽开始和结束时执行相应的操作。例如：

const draggableElements = document.querySelectorAll('.draggable');

draggableElements.forEach(element => {
  element.addEventListener('dragstart', handleDragStart);
  element.addEventListener('dragend', handleDragEnd);
});

希望这些代码可以帮助您实现您的需求。