js css3 to achieve picture drag effect

  • 2021-07-26 06:21:35
  • OfStack

In this paper, we share the specific code of css3 to realize the picture drag effect for your reference. The specific contents are as follows


<!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{ Elements that support dragging and dropping }+img[src='images/lf.jpg']*3+h1{ Elements that need to be dragged on }+div.colorBox*3+h1{ Display frame }+div.showBox-->
    <h1> Elements that support dragging and dropping </h1>
    <img src="images/lf.jpg" alt="" />
    <img src="images/nm.jpg" alt="" />
    <img src="images/sl.jpg" alt="" />
    <h1> Elements that need to be dragged on </h1>
    <div class='container'>
      <!-- Add Open Drag Attribute -->
      <div class="colorBox" draggable="true"></div>
      <div class="colorBox" draggable="true"></div>
      <div class="colorBox" draggable="true"></div>
    </div>
    <h1> Display frame </h1>
    <div class="showBox"></div>
  </body>

</html>
<script type="text/javascript">
  
  //  Define global variables   Save   Drag and drop elements 
  var moveDom ;
  
  //  Let elements   Be able to be   Drag-and-drop content   Throw in 
  document.querySelector('.showBox').ondragover = function (e){
    // Prevent browser default behavior (W3C)
    e.preventDefault();
  }
  
  //  Drag and drop elements   Throw to   In the container   Will trigger  ondrop Events 
  //  If there is no  ondragover Medium   Block default behavior   Then   Unable to trigger  ondrop Events 
  document.querySelector('.showBox').ondrop = function (){
    //console.log(moveDom);
    if(moveDom.src){
      //  If  src Valuable   Then set the src Attribute 
      //  Get  moveDom Adj. src Attribute   And assign a value to   Box will do 
    this.style.background = 'url('+moveDom.src+')no-repeat center/cover';
    }else{
      //  If src No value   Then   Set the background color 
//      console.log(moveDom);
//      console.log(moveDom.style.backgroundColor);
      //  The method   The content returned is  style Attribute 
      // getComputedStyle  Be able to obtain  style In the label   Writing style 
      console.log(window.getComputedStyle(moveDom).backgroundColor);
      this.style.backgroundColor = window.getComputedStyle(moveDom).backgroundColor;
    }
  }
  
  //  When we start dragging and dropping elements,   Will trigger  ondragstart Events 
  var imgs = document.querySelectorAll('img');
  for (var i=0;i<imgs.length;i++) {
    imgs[i].ondragstart = function (){
      moveDom = this;
    }
  }
  
  
  //  For div Bind drag start event 
  var colorBoxs = document.querySelectorAll('.colorBox');
  for (var i=0;i<colorBoxs.length;i++) {
    colorBoxs[i].ondragstart = function (){
      moveDom = this;
    }
  }
</script>


Related articles: