以上代码拖拽的容器时会把整个容器当拖拽目标移动,如何自定义这个移动的样式
时间: 2024-03-16 18:43:16 浏览: 22
要自定义拖拽容器的移动样式,可以使用CSS的`dragover`和`dragenter`伪类,来改变拖拽容器的样式。具体实现可以参考以下代码示例:
```css
/* 拖拽容器的默认样式 */
#container {
border: 1px solid #ccc;
padding: 10px;
}
/* 拖拽容器被拖拽时的样式 */
#container.dragover {
border: 2px dashed #aaa;
background-color: #f5f5f5;
}
/* 拖拽容器中的元素被拖拽时的样式 */
#container .draggable.dragging {
opacity: 0.5;
cursor: move;
}
```
在上面的代码中,我们定义了三种不同状态下的样式:
- 默认样式:拖拽容器的默认样式。
- 拖拽样式:当拖拽容器被拖拽时触发的样式,使用了`dragover`伪类来定义。
- 元素拖拽样式:当拖拽容器中的元素被拖拽时触发的样式,使用了`.draggable.dragging`选择器来定义。
然后在JavaScript代码中,我们可以通过添加或移除`dragover`类来改变拖拽容器的样式,具体实现可以参考以下代码:
```javascript
// 获取拖拽容器
const container = document.getElementById('container');
// 绑定dragover事件
container.addEventListener('dragover', function (event) {
event.preventDefault();
// 添加dragover类
container.classList.add('dragover');
});
// 绑定dragleave事件
container.addEventListener('dragleave', function (event) {
// 移除dragover类
container.classList.remove('dragover');
});
// 绑定drop事件
container.addEventListener('drop', function (event) {
event.preventDefault();
// 移除dragover类
container.classList.remove('dragover');
// 获取被拖拽元素的数据
const data = event.dataTransfer.getData('text/plain');
// 将元素移动到新位置
event.target.appendChild(document.getElementById(data));
});
```
在上面的代码中,我们添加了`dragover`和`dragleave`事件,通过添加或移除`dragover`类来改变拖拽容器的样式。同时,我们还绑定了drop事件,将元素移动到新的位置。