JavaScript implements photo drag-and-drop click on top of Photo wall code _javascript Tips

Demo diagram

Styles.css

*{/* Clears all elements ' default margins and Margins/}. photo_wall{Background:url (bg.jpg);/* Define the default background of the photo wall/background-size:cover;/* Make the background of the photo wall fill the photo wall * * * * width:1200px;
/* Set the photo wall of the width of high * * * height:500px; margin:40px Auto; /* Set the outer margin of the photo wall * * * display:-webkit-box;
* * Use CSS3 Box model flow layout/Display:-moz-box;
Display:box; -webkit-box-align:center;
 /* Define box model internal elements in the vertical direction of the middle position * * *-moz-box-align:center;
Box-align:center; -webkit-box-pack:center;
 /* Define box model internal elements in the horizontal direction of the middle position * * *-moz-box-pack:center;
Box-pack:center; Photo_wall. photo_frame{Text-align:center/* The text in the photo is centered display/padding:10px 10px 30px 10px;/* Define the inside filler of the photo/* Background-col Or: #f2eada; /* Set the background color of the photo * * FONT-SIZE:.8EM; * * The size of the text inside the photo/Box-shadow:.2em 2em 8em #130c0e; /* To add shadow effect to the photo, rich three-dimensional * * * * photo_frame p{margin-top:10px/* Set the outer margin of the text paragraph in the photo/} #photo01 {Position:fixed;top:90px;left:5
0px; -webkit-transform-origin:right Bottom;
/* Defines the rotation point of photo 1 as the lower right corner * *-moz-transform-origin:right bottom;
Transform-origin:right Bottom; -webkit-transform:rotate (10DEG); * * to the base point for the axis, in 2D space clockwise rotation 10 degrees/-moz-transform:rotate (10DEG);
-o-transform:rotate (10DEG);
Transform:rotate (10DEG);
Position:absolute; } #photo02 {position:fixed;top:100px;left:300px-webkit-transform-origin:right bottom/* Defines the rotation point of photo 2 as the lower right corner * *
Moz-transform-origin:right Bottom;
Transform-origin:right Bottom; -webkit-transform:rotate ( -20DEG);
* * To base point for the axis, in 2D space counterclockwise rotation 20 degrees/-moz-transform:rotate ( -20DEG);
-o-transform:rotate ( -20DEG);
Transform:rotate ( -20DEG);
Position:absolute; } #photo03 {position:fixed;top:80px;left:750px-webkit-transform-origin:left top;/* Defines the rotation basis for Photo 3 as the upper left corner/*
Moz-transform-origin:left top;
Transform-origin:left top; -webkit-transform:rotate (40DEG);
* * to the base point for the axis, in 2D space clockwise rotation 40 degrees/-moz-transform:rotate (40DEG);
-o-transform:rotate (40DEG);
Transform:rotate (40DEG);
Position:absolute; } #vedio1 {position:fixed;top:250px;left:950px-webkit-transform-origin:right top;/* Defines the rotation basis for Photo 3 as the upper left corner/*
Moz-transform-origin:right top;
Transform-origin:right top; -webkit-transform:rotate ( -100DEG);
* * to the base point for the axis, in 2D space clockwise rotation 40 degrees/-moz-transform:rotate (50DEG); -O-transform:rotate ( -50DEG);
Transform:rotate (50DEG);
Position:absolute; 
} div{cursor:move #top {right:0;top:0;
width:100px;
height:100%; 
position:fixed; 
padding:10px; 
Text-align:center; 
Font-weight:bold;
Background: #f2eada;
opacity:0.9; }

drag.js

var zindex = 1;
  Window.onload = function () {var x=document.getelementsbyname ("Photo");
    for (Var i=0;i<x.length;i++) {drag (x[i]);
  Alter (X[I].VALUE);
  }//var ODrag1 = document.getElementById ("photo01");
  var oDrag2 = document.getElementById ("photo02");
  var oDrag3 = document.getElementById ("photo03");
  var oDrag4 = document.getElementById ("Vedio1");
  Drag (ODRAG1);
  Drag (ODRAG2);
  Drag (ODRAG3);
Drag (ODRAG4);
};
var cengshu=0;
  function drag (Odrag) {var disx = Dixy = 0;
    Odrag.onmousedown = function (event) {var event = Event | | window.event;
    DISX = Event.clientx-this.offsetleft;   
    Disy = Event.clienty-this.offsettop;
    odrag.style.position= ' fixed ';
    odrag.style.zindex=cengshu++;
    var otemp = document.createelement ("div");
    otemp["id"] = "temp"; OTemp.style.left = This.currentstyle?
    This.currentstyle[' Left ': getComputedStyle (this, null) [' left ']; OTemp.style.top = This.currentstyle? This.currentstyle[' top ': getComputedStyle (this, null) [' top] ';
    OTemp.style.zIndex = zindex++;
     
    Document.body.appendChild (otemp);
      Document.onmousemove = function (event) {var event = Event | | window.event;
      var IL = Event.clientx-disx;
      var IT = Event.clienty-disy;
      var MaxL = document.documentelement.clientwidth-odrag.offsetwidth;
      var maxt = document.documentelement.clientheight-odrag.offsetheight il <= 0 && (il = 0);
      It <= 0 && (it = 0);
      Il >= maxL && (il = MaxL);
       
      It >= maxt && (it = maxt);
      ODrag.style.left = IL + "px";
      ODrag.style.top = IT + "px";
    return false;
     
    };
      Document.onmouseup = function () {document.onmousemove = null;
      Document.onmouseup = null;
      ODrag.style.left = OTemp.style.left;
      ODrag.style.top = OTemp.style.top;
      ODrag.style.zIndex = OTemp.style.zIndex; Document.bodY.removechild (otemp);
     
    Odrag.releasecapture && odrag.releasecapture ()};    
    This.setcapture && this.setcapture (); Return False}}

picwall.html

<!
    DOCTYPE html>  

The pictures that are used

The above is the entire content of this article, I hope to be proficient in mastering JavaScript help.