js css3实现图片拖拽效果

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

  
    
    
    
      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;
      }
    
  

  
    
    支持拖拽的元素
    
    
    
    需要开启拖拽的元素
    
      
      
      
      
    
    展示框