要避免元素在可拖动时被拖动，可以使用以下代码示例中的解决方法：

HTML:

  可拖动元素

CSS:

#draggable {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

#draggable.dragging {
  cursor: not-allowed;
  opacity: 0.5;
}

JavaScript:

var draggableElement = document.getElementById('draggable');

draggableElement.addEventListener('dragstart', function(event) {
  // 取消拖动事件，使元素无法被拖动
  event.preventDefault();
});

draggableElement.addEventListener('drag', function(event) {
  // 添加“dragging”类，改变鼠标样式和透明度
  draggableElement.classList.add('dragging');
});

draggableElement.addEventListener('dragend', function(event) {
  // 移除“dragging”类
  draggableElement.classList.remove('dragging');
});

在上述代码中，我们首先给可拖动元素添加了draggable属性，使其可拖动。然后，通过在dragstart事件中调用event.preventDefault()方法，取消了拖动事件，从而阻止了元素被拖动的默认行为。接着，我们在drag事件中添加了一个“dragging”类，通过改变鼠标样式和透明度来表示元素不可拖动的状态。最后，在dragend事件中移除了“dragging”类。

这样，当用户尝试拖动该元素时，它将无法被拖动，并且鼠标样式和透明度将发生变化，以指示元素不可拖动。