在VueJS中使用Shopify Draggable时消除拖动事件的蓝色高亮

我之前也踩过这个坑！这个蓝色高亮大概率是两种情况导致的：要么是浏览器默认的文本选中样式被拖动操作触发了，要么是Shopify Draggable在拖动阶段给元素添加了临时的焦点/拖动状态样式。下面给你几个亲测有效的解决办法：

方法一：禁用文本选中（最常用） #

拖动操作很容易误触发浏览器的文本选中行为，这就是蓝色高亮的常见来源。你可以给可拖动容器及其子元素添加CSS来禁用文本选中：

/* 替换成你的可拖动容器类名 */
.draggable-container, .draggable-container * {
  /* 禁用文本选中 */
  user-select: none;
  /* 兼容不同浏览器 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

方法二：覆盖Draggable的拖动状态样式 #

Shopify Draggable在元素被拖动时，会自动给元素添加类似draggable--is-dragging的类名（可以用浏览器开发者工具在drag:start阶段查看元素的类）。你可以针对这个类覆盖掉高亮样式：

/* 针对拖动中的容器 */
.draggable-container.draggable--is-dragging {
  outline: none !important;
  box-shadow: none !important;
  /* 如果还有其他导致高亮的属性，比如background-color，也可以在这里重置 */
  background-color: inherit !important;
}

方法三：通过Draggable事件手动控制样式 #

如果上面的CSS方法没生效，你可以在Vue组件里监听Draggable的drag:start和drag:stop事件，直接操作元素样式：

mounted() {
  // 初始化Draggable
  const draggableInstance = new Draggable(this.$refs.draggableContainer, {
    // 你的Draggable配置项，比如animation: 200等
  });

  // 拖动开始时移除高亮样式
  draggableInstance.on('drag:start', (event) => {
    const target = event.source;
    target.style.outline = 'none';
    target.style.userSelect = 'none';
    target.style.boxShadow = 'none';
  });

  // 拖动结束时可以恢复原样式（如果需要）
  draggableInstance.on('drag:stop', (event) => {
    const target = event.source;
    target.style.outline = '';
    target.style.userSelect = '';
    target.style.boxShadow = '';
  });
}

小技巧：精准定位样式来源 #

如果还是找不到问题，可以用浏览器开发者工具的暂停脚本功能：

• 打开F12开发者工具，切换到Sources面板
• 点击暂停按钮（⏸️）
• 触发拖动操作，此时页面会暂停在drag:start阶段
• 选中可拖动容器，查看右侧Styles面板里的所有生效样式，找到导致蓝色高亮的属性，针对性覆盖即可

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