javascript

js css3 to achieve picture drag effect

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>