js css3实现图片拖拽效果

本文实例为大家分享了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>

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

# js # css3 # 拖拽 # JavaScript实现图片的放大缩小及拖拽功能示例 # 原生JS实现拖拽图片效果 # js实现使用鼠标拖拽切换图片的方法 # JS HTML5拖拽上传图片预览 # js实现拖拽上传图片功能 # js实现图片放大和拖拽特效代码分享 # JS实现简易的图片拖拽排序实例代码 # javascript 网页编辑框及拖拽图片的问题 # JavaScript实现文字与图片拖拽效果的方法 # 原生JS实现拖拽照片墙 # 拖放 # 如果没有 # 当我们 # 大家分享 # 绑定 # 具体内容 # 大家多多 # 全局变量 # 容器内 # content # justify # display # colorBox # flex # center # align # body # container # width

返回目录在线咨询

上一篇：MAUI Entry控件怎么自定义 MAUI输入框定制教程
下一篇：专业app网站制作流程,互联网设计挣钱吗？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

js css3实现图片拖拽效果

您的项目需求