弹出层并可拖拽

最近用原生JS写一个环形的鼠标滑动效果,代码如下:

本文实例为大家分享了css3实现图片拖拽效果的具体代码,供大家参考,具体内容如下

×

弹出层

[Ctrl+A 全选
注:如需引入外部Js需刷新才能执行]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{margin:0;padding:0;}
    div{width:50px;height:50px;border-radius:50%;position: absolute;
      border-width:10px;border-style: solid;}
  </style>
</head>
<body>
</body>
<script>
  var divList=[];//创建一个空的集合,用来存储创建的div
  for(i=0;i<50;i++){//循环次数50,创造50个div(环形)
    var div=document.createElement("div");
    var red=Math.round(Math.random()*255);
    var green=Math.round(Math.random()*255);
    var yellow=Math.round(Math.random()*255);//(产生随机数作为环形的颜色)
    div.style.borderColor="rgb("+red+","+green+","+yellow+")";
    document.body.appendChild(div);//在文档中产生环形
    divList[divList.length]=div;//将产生的每一个环形放入空集合
  }
  document.onmousemove=function(e){//先鼠标按下获取相对位置
    var evt=window.event || e;//IE兼容
    var x=evt.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft);//鼠标当前x位置
    var y=evt.clientY+(document.documentElement.scrollTop||document.body.scrollTop);//鼠标当前y位置

    divList[0].style.left=x+"px";//第一个环形的x位置
    divList[0].style.top=y+"px";//第一个环形的Y位置

      for(i=divList.length-1;i>0;i--){//循环让每一个环形都在它上一个的位置
        divList[i].style.left=divList[i-1].offsetLeft+"px";
        divList[i].style.top=divList[i-1].offsetTop+"px";
      }
    }
</script>
</html>
<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      body{
        text-align: center;
      }
      .container{
        display: flex;
        justify-content: center;
      }
      .colorBox{
        width: 100px;
        height: 100px;
        border:1px solid gray;
        margin: 0 20px;
      }
      .showBox{
        width: 100px;
        height: 100px;
        border:5px dashed gray;
        margin: 0 auto;
      }
      .colorBox:nth-child(1){
        background-color: orange;
      }
      .colorBox:nth-child(2){
        background-color: skyblue;
      }
      .colorBox:nth-child(3){
        background-color: yellowgreen;
      }
      img{
        border: 1px solid gray;
        margin:0 20px;
      }
    </style>
  </head>

  <body>
    <!--h1{支持拖拽的元素}+img[src='images/lf.jpg']*3+h1{需要开启拖拽的元素}+div.colorBox*3+h1{展示框}+div.showBox-->
    <h1>支持拖拽的元素</h1>
    <img src="images/lf.jpg" alt="图片 1" />
    <img src="images/nm.jpg" alt="图片 2" />
    <img src="images/sl.jpg" alt="图片 3" />
    <h1>需要开启拖拽的元素</h1>
    <div class='container'>
      <!--添加开启拖拽属性-->
      <div class="colorBox" draggable="true"></div>
      <div class="colorBox" draggable="true"></div>
      <div class="colorBox" draggable="true"></div>
    </div>
    <h1>展示框</h1>
    <div class="showBox"></div>
  </body>

</html>
<script type="text/javascript">

  // 定义全局变量 保存 拖放元素
  var moveDom ;

  // 让元素 能够被 拖放的内容 丢进去
  document.querySelector('.showBox').ondragover = function (e){
    //防止浏览器默认行为(W3C)
    e.preventDefault();
  }

  // 拖放元素 丢到 容器内 会触发 ondrop事件
  // 如果没有在 ondragover中 阻止默认行为 那么 无法触发 ondrop事件
  document.querySelector('.showBox').ondrop = function (){
    //console.log(moveDom);
    if(moveDom.src){
      // 如果 src有值 那么设置src属性
      // 获取 moveDom的src属性 并赋值给 盒子即可
    this.style.background = 'url('+moveDom.src+')no-repeat center/cover';
    }else{
      // 如果src没有值 那么 设置背景颜色
//      console.log(moveDom);
//      console.log(moveDom.style.backgroundColor);
      // 该方法 返回的内容是 style属性
      // getComputedStyle 能够获取 style标签中 写的样式
      console.log(window.getComputedStyle(moveDom).backgroundColor);
      this.style.backgroundColor = window.getComputedStyle(moveDom).backgroundColor;
    }
  }

  // 当我们开始拖放元素的时候 会触发 ondragstart事件
  var imgs = document.querySelectorAll('img');
  for (var i=0;i<imgs.length;i++) {
    imgs[i].ondragstart = function (){
      moveDom = this;
    }
  }


  // 为div绑定拖拽开始事件
  var colorBoxs = document.querySelectorAll('.colorBox');
  for (var i=0;i<colorBoxs.length;i++) {
    colorBoxs[i].ondragstart = function (){
      moveDom = this;
    }
  }
</script>

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注