drag 拖动元素让元素跟着鼠标移动，但是拖拽时的阴影咋隐藏不让他显示 ,

引自免费微信小程序：皆我百晓生

为了实现拖拽元素跟随鼠标移动，并且在拖拽过程中隐藏元素的阴影，你需要使用CSS样式和JavaScript来配合完成。首先，为可拖动元素设置基本的draggable属性和阴影样式。然后，通过JavaScript监听dragstart、drag和dragend事件来控制阴影的显示与隐藏。

下面是一个详细的步骤和示例代码：

1. 首先，在HTML中创建一个可拖动的元素，并添加一些初始样式（例如阴影）。

    
    
    


    
点击修改文字
    

1. 在main.js文件中编写JavaScript代码来处理拖拽事件。

document.addEventListener('DOMContentLoaded', function () {
    const draggableElement = document.querySelector('.draggable');

    draggableElement.addEventListener('dragstart', function (event) {
        event.target.style.boxShadow = 'none'; // 隐藏阴影
    });

    draggableElement.addEventListener('drag', function (event) {
        event.target.style.transform = `translate(${event.clientX - event.target.offsetWidth / 2}px, ${event.clientY - event.target.offsetHeight / 2}px)`; // 跟随鼠标移动
    });

    draggableElement.addEventListener('dragend', function (event) {
        event.target.style.boxShadow = '4px 4px 6px rgba(0, 0, 0, 0.3)'; // 显示阴影
    });
});

这段代码的工作原理是这样的：

• 当用户开始拖拽元素时（dragstart事件），我们移除元素的阴影效果。
• 在拖拽过程中（drag事件），我们将元素的位置实时更新为鼠标位置减去元素中心点的距离，从而使得元素始终跟随鼠标。
• 当用户结束拖拽（dragend事件），我们重新添加元素的阴影效果。

这样就实现了拖拽元素跟随鼠标移动，并在拖拽期间隐藏元素的阴影。你可以将上述HTML和JavaScript代码保存到相应文件中，然后在浏览器中打开HTML文件进行测试。

晚上好🌙🌙🌙
本答案参考ChatGPT-3.5

可以通过 CSS 的样式规则来隐藏拖动元素时的阴影效果，具体操作如下：

1. 添加以下样式规则：

* {
  -webkit-user-select: none; /* 禁止选中文本 */
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 隐藏拖动元素时的阴影效果 */
.drag-shadow {
  display: none;
}

1. 给拖动元素添加 draggable="true" 属性，同时在 dragstart 事件中添加如下代码：

event.dataTransfer.setDragImage(event.target, 0, 0);

这段代码的作用是把拖动元素自身作为拖动时的图片，并设置偏移量为 (0, 0)，也就是说不会出现任何偏移。

1. 在 dragover 事件中阻止默认行为：

event.preventDefault();

这样可以避免浏览器对拖动事件进行默认的处理，比如打开链接等。

最终的代码可以参考以下示例：

  
  


Drag me

<
!DOCTYPE html>
<
html>
<
head>
<
style>
.dragElement {width: 100px;
height: 100px;
background-color: lightblue;
position: absolute;
cursor: move;
} 
        .shadowElement {display: none;
}<
/style>
<
/head>
<
body>
<
div class="
dragElement"
 draggable="
true"
 ondragstart="
event.dataTransfer.setData('text/plain', null)"
 ondrag="
drag(event)"
>
Drag me<
/div>
<
div class="
shadowElement"
 style="
width: 100px;
 height: 100px;
 background-color: lightgray;
 position: absolute;
"
>
<
/div>
 
<
script>
function drag(event) {let dragElement = document.querySelector('.dragElement');
let shadowElement = document.querySelector('.shadowElement');
 
        shadowElement.style.display = 'block';
shadowElement.style.left = event.clientX - dragElement.offsetWidth / 2 + 'px';
shadowElement.style.top = event.clientY - dragElement.offsetHeight / 2 + 'px';
 
        event.dataTransfer.setDragImage(shadowElement, 0, 0);
}<
/script>
<
/body>
<
/html>

在这段代码中，我们通过设置一个shadowElement元素来模拟拖拽时的阴影，并将其初始设为不显示。在drag函数中，我们根据鼠标位置动态调整shadowElement的位置，并通过event.dataTransfer.setDragImage()函数将其作为拖拽时的影子，从而隐藏原生的拖拽阴影。