【每日一练】43—鼠标拖拽效果的实现

最新推荐文章于 2023-03-27 10:22:18 发布

web前端开发V

最新推荐文章于 2023-03-27 10:22:18 发布

阅读量228

点赞数

文章标签： css javascript js 编程语言 html

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649130720&idx=3&sn=a917dcf8b8ab41b96bb344186f751e0b&chksm=be58a14d892f285bdc15946ac0528da5fb3aba3c0c8c3610cfae0015f44bbfb8468dfaffe11b&scene=126&&sessionid=0

版权

写在前面

拖拽功能的实现，也是我们在学习JS时会经常拿来练习的一个项目，因为这个功能比较常见，也是实际开发中会经常遇到的，所以，今天这个练习，能够对你有所帮助。

当然，你不用完全按照这个来，如果你已经学习过了JavaScript，这个练习，你也可以直接跳过，或者也可以跟我们分享你的实现方法。

如果是跟着【每日一练】来的话，那就先练起来，先不要害怕，也不用担心，因为，没有人是天生就会的，行动起来，最为重要。

好了，我们一起来看一下今天练习的最终效果：

具体实现代码如下：

HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>【每日一练】43—鼠标拖拽效果的实现</title>
  </head>
  <body>
    <div class="empty">
      <div class="fill" draggable="true"></div>
    </div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
  </body>
</html>

CSS代码：

* {
  box-sizing: border-box;
}


body {
  background-color: steelblue;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}


.empty {
  height: 150px;
  width: 150px;
  margin: 10px;
  border: solid 3px black;
  background: white;
}


.fill {
  background-image: url('images/01.jpg');
  height: 145px;
  width: 145px;
  cursor: pointer;
}


.hold {
  border: solid 5px #ccc;
}


.hovered {
  background-color: #333;
  border-color: white;
  border-style: dashed;
}


@media (max-width: 800px) {
  body {
    flex-direction: column;
  }
}

JS代码：

const fill = document.querySelector('.fill')
const empties = document.querySelectorAll('.empty')


fill.addEventListener('dragstart', dragStart)
fill.addEventListener('dragend', dragEnd)


for(const empty of empties) {
    empty.addEventListener('dragover', dragOver)
    empty.addEventListener('dragenter', dragEnter)
    empty.addEventListener('dragleave', dragLeave)
    empty.addEventListener('drop', dragDrop)
}


function dragStart() {
    this.className += ' hold' 
    setTimeout(() => this.className = 'invisible', 0)
}


function dragEnd() {
    this.className = 'fill'
}


function dragOver(e) {
    e.preventDefault()
}


function dragEnter(e) {
    e.preventDefault()
    this.className += ' hovered'
}


function dragLeave() {
    this.className = 'empty'
}


function dragDrop() {
    this.className = 'empty'
    this.append(fill)
}

写在最后

以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

学习更多技能

请点击下方公众号