js css3实现图片拖拽效果

2019-11-19 17:19:30

字体：大中小

来源：转载

供稿：网友

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

<!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="" />    <img src="images/nm.jpg" alt="" />    <img src="images/sl.jpg" alt="" />    <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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：浅谈javascript的url参数parse和build函数

下一篇：jQuery插件echarts实现的单折线图效果示例【附demo源码下载】