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>

    <meta charset="UTF-8">
    <style type="text/css">
        text-align: center;
        display: flex;
        justify-content: center;
        width: 100px;
        height: 100px;
        border:1px solid gray;
        margin: 0 20px;
        width: 100px;
        height: 100px;
        border:5px dashed gray;
        margin: 0 auto;
        background-color: orange;
        background-color: skyblue;
        background-color: yellowgreen;
        border: 1px solid gray;
        margin:0 20px;

    <!--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>
    <h1> Display frame </h1>
    <div class="showBox"></div>

<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)
  //  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 (){
      //  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';
      //  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 
      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;

Related articles: