两个盒子，拖动内部盒子才能移动

最新推荐文章于 2025-01-17 21:07:42 发布

原创最新推荐文章于 2025-01-17 21:07:42 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css3

这篇博客介绍了如何使用HTML和CSS创建具有不规则圆角的元素，并通过JavaScript实现元素的拖动交互。示例中包含一个外部容器和内部元素，两者都应用了圆角样式。JavaScript代码监听了内部元素的鼠标按下事件，允许用户在页面上拖动该元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
      <div class="outside">
        <div class="inside">

        </div>
      </div>
</body>
</html>
<style>
    .outside{
      width: 300px;
      height: 300px;
      background-color: blue;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 15px 50px 30px;
    }
    .inside{
      width: 300px;
      height: 50px;
      background-color: red;
      border-radius: 15px 50px 30px;
    }
</style>
<script>
  var out = document.querySelector('.outside')
  var inside = document.querySelector('.inside')
  console.log(out,inside);
  inside.addEventListener('mousedown',function(e){
      var x = e.pageX - out.offsetLeft
      var y = e.pageY - out.offsetTop
      document.addEventListener('mousemove',isMove)
      function isMove(e){
        out.style.left = e.pageX - x + 'px'
        out.style.top = e.pageY - y  +'px'
      } 
      document.addEventListener('mouseup',function(e){
        document.removeEventListener('mousemove',isMove)
      })
  })
</script>