js实现九宫格单元格拖拽效果
时间: 2023-11-17 10:06:14 浏览: 64
你可以使用HTML5中的draggable属性和JavaScript来实现九宫格单元格的拖拽效果。以下是一个简单的实现:
HTML:
```
<div class="grid">
<div class="cell" draggable="true"></div>
<div class="cell" draggable="true"></div>
<div class="cell" draggable="true"></div>
<div class="cell" draggable="true"></div>
<div class="cell" draggable="true"></div>
<div class="cell" draggable="true"></div>
<div class="cell" draggable="true"></div>
<div class="cell" draggable="true"></div>
<div class="cell" draggable="true"></div>
</div>
```
CSS:
```
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.cell {
width: 100%;
height: 100%;
background-color: #ddd;
}
```
JavaScript:
```
var cells = document.querySelectorAll('.cell');
var draggingCell = null;
for (var i = 0; i < cells.length; i++) {
var cell = cells[i];
cell.addEventListener('dragstart', function() {
draggingCell = this;
setTimeout(function() {
draggingCell.style.display = 'none';
}, 0);
});
cell.addEventListener('dragend', function() {
draggingCell.style.display = 'block';
draggingCell = null;
});
cell.addEventListener('dragover', function(e) {
e.preventDefault();
});
cell.addEventListener('dragenter', function(e) {
e.preventDefault();
this.classList.add('hover');
});
cell.addEventListener('dragleave', function() {
this.classList.remove('hover');
});
cell.addEventListener('drop', function() {
if (this !== draggingCell) {
var temp = this.innerHTML;
this.innerHTML = draggingCell.innerHTML;
draggingCell.innerHTML = temp;
}
this.classList.remove('hover');
});
}
```
这段代码首先选择所有的单元格,然后为每个单元格添加拖拽事件监听器。当一个单元格开始被拖拽时,我们把它的引用存储在draggingCell变量中,并且在0ms后将其隐藏。当单元格拖拽结束时,我们恢复其显示状态并将draggingCell变量设置为null。
当一个单元格被拖拽到另一个单元格上时,我们使用preventDefault()方法来防止默认的drop事件发生,并且给目标单元格添加一个.hover类。当拖拽离开一个单元格时,我们移除.hover类。当一个单元格被放置时,我们检查是否目标单元格不是当前拖拽的单元格,如果不是,我们交换它们的innerHTML。
最后,我们使用CSS来布局九宫格,并将每个单元格设置为可拖拽的。