js拖拽不让元素拖拽时半透明
时间: 2023-09-11 11:09:35 浏览: 623
JQuery拖动窗口,拖动时有半透明效果,
4星 · 用户满意度95%
要在拖拽元素时使其保持不透明,你可以通过在拖拽开始和结束时分别设置元素的透明度来实现。你可以使用`dragstart`和`dragend`事件来实现这个效果。
以下是一个示例代码:
```html
<style>
.draggable {
opacity: 1;
}
</style>
<div class="draggable" draggable="true">拖拽元素</div>
<script>
const draggableElement = document.querySelector('.draggable');
draggableElement.addEventListener('dragstart', function(event) {
this.style.opacity = '1'; // 拖拽开始时设置不透明
});
draggableElement.addEventListener('dragend', function(event) {
this.style.opacity = '1'; // 拖拽结束时设置不透明
});
</script>
```
在上面的示例中,我们给拖拽元素添加了一个`.draggable`类,并设置了初始的不透明度为1。然后,我们使用`addEventListener`方法为元素绑定了`dragstart`和`dragend`事件的处理函数。在拖拽开始时,我们将元素的透明度设置为1,以确保它保持不透明。同样,在拖拽结束时,我们也将透明度设置为1。
这样,无论你拖拽元素到哪里,它始终保持不透明。你可以根据需要修改其他样式属性或事件处理函数来满足你的具体需求。
阅读全文