Native JS implement drag and drop picture effect _javascript skill

The example of this article for you to explain the implementation of JS drag-and-drop picture of the detailed code, to share with you for your reference, the specific content as follows

The difference between the Clientx,offsetx,screenx,pagex of a JavaScript event object:

Using HTML5 's Drag to implement drag-and-drop compatibility issues, use drag-and-drop plug-in code, and a lot of this drag-and-drop demo code, and compatible with all browsers, it is worthwhile to use in the project,

The CSS styles are as follows:

  #div1 { 
    width:100px; height:100px; 
    Background-color: #4D4D4D; 
    Position:absolute; Cursor:pointer; 
    -webkit-box-shadow:3px 3px 0px 3px #C7C7C7; 
    box-shadow:3px 3px 3px 0px #C7C7C7; 
  }
  #parent { 
    width:500px; height:500px; 
    border:1px solid #CDCDCD; 
    position:relative; margin:0 Auto;  The parent element is set to:
    Background-color: #F4F4F4; 
  }
  . posttext{
    width:500px; height:30px;margin:0 auto; Background-color: #F4F4F4;
  }
  . PostText span{ 
   padding:0px 10px;
  }

The HTML code is as follows:

<div id= "Parent" >
  <div id= "Div1" onmousemove= "Posmove (this.id)" ></div>
</div>
<div class= "PostText" >
  moving distance top:<span id= "postop" ></span>left:<span id= "PosLeft" ></span>
</div>

JS code and comments are as follows

function Posmove (getdivid) {var odiv = document.getElementById (Getdivid);
    var oparent = document.getElementById (' parent ');
      var sent = {l:10,//Set div in the parent element's active range, 10 is equivalent to the parent Div set padding-left:10; R:oparent.offsetwidth-odiv.offsetwidth,//offsetwidth: Width of current object, offsetwidth = Width+padding+border T:10, b 
  : Oparent.offsetheight-odiv.offsetheight, N:10} drag (Odiv, sent); /** * * @param obj: dragged Div * @param sent: Sets the area that the div can be dragged in the container/function drag (obj,sent) {var DMW = Document.documentElement.clientWidth | |
    Document.body.clientWidth; var DmH = Document.documentElement.clientHeight | |

    Document.body.clientHeight; var sent = sent | |
    {}; var L = SENT.L | |
    0; var r = SENT.R | |
    Dmw-obj.offsetwidth; var t = sent.t | |
    0; var b = sent.b | |
    Dmh-obj.offsetheight; var n = SENT.N | |

    10;
      Obj.onmousedown = function (ev) {var oevent = EV | | | event; var sentx = Oevent.clientx-obJ.offsetleft;

      var senty = oevent.clienty-obj.offsettop;

        Document.onmousemove = function (ev) {var oevent = EV | | | event;
        var slideleft = Oevent.clientx-sentx;

        var slidetop = Oevent.clienty-senty;
        if (Slideleft <= l) {slideleft = l;
        } if (Slideleft >= r) {slideleft = R;
        } if (Slidetop <= t) {slidetop = t;
        } if (Slidetop >= b) {slidetop = b;
        } obj.style.left = Slideleft + ' px ';

        Obj.style.top = slidetop + ' px ';
        document.getElementById (' Postop '). InnerHTML = Slidetop;

      document.getElementById (' Posleft '). InnerHTML = Slideleft;
      };
        Document.onmouseup = function () {document.onmousemove = null;
      Document.onmouseup = null;
    return false;  
 }
  }

Above is about the implementation of JS drag-and-drop effect code, I hope to help you learn.