Pure JS to implement a simple example of dragging a form _javascript tips

Because to use can drag the form, the individual should prefer to do their own hands, do not like to do not understand the implementation or the principle of the use of plug-ins, so look for information to achieve a.

train of thought: put: Use MouseDown to determine whether the mouse click position in the trigger control position, if it is, MouseMove clone a control, modify the transparency, and then put into the container when remove this control, and generates a placed control inside the container (the controls you put in and the controls you trigger can be different)

drag and drop: the same, MouseDown the time to determine which control, MouseMove need to put a placeholder div placed in the original position, and the elements to modify the transparency and then set to absolute positioning convenient drag, in the drag, The placeholder div also changes with the mouse position (determining whether the current mouse position is half the upper-left corner of the container's control and the height of the controls), and when it is dropped, the position of the placeholder div is inserted. Concrete look at the code, this idea plus the time distance code to achieve a little long time, all may not be very accurate, but the general idea is this.

PS: to use the drag-and-drop form function, it is possible to change the previous design database mode, here can provide you with a search list of vertical storage

Comments are basically written in detail, directly on the code.

If you have any questions, please advise the great God!

<!
      DOCTYPE html>  

/** * AUTHOR:LZH * Function: Can drag and drop sort form implementation * Parameters: Oclick Click on the object that triggers the event * ocreate the object passed in the form after departure * Bismany whether a single Oclick object can be dragged into multiple ocreate pairs Like * Oplace dragged in the placeholder div object * Obox dragged into the container, does not fill the default is the body/function Createwin (oclick,ocreate,bismany,oplace,obox=document.b
  Ody) {//Whether click on the Trigger object var Isclick = false;
  Whether the trigger object is an element in the container var Isincludebox = false;
  Oplace.style.width = obox.offsetwidth-5 + "px";
  Oplace.style.height = oclick.offsetheight-5 + "px";
  The temporary element of the move effect var Oclickclone;
  var Oclickdown;
  Compute the offset var diffobj;
  var diffx;
  var Diffy;
  var tmp;
  var omove_position; Dot is included in container function Isinclude (x,y,includebox=obox) {if (x > Includebox.offsetleft && y > inclu Debox.offsettop && x < Includebox.offsetleft + includebox.offsetwidth && y < Includebox.off
    Settop + includebox.offsetheight) return true;
  return false; }//Move effect function Movemagic (omove,e) {//omove_position = window.getComputedStyle (omove). GetproPertyvalue (' position ');
    Omove.style.opacity = 0.4;
    Omove.style.position = "absolute";
    Document.body.appendChild (Omove);
    Omove.style.left = e.clientx-diffx+ "px";
  Omove.style.top = e.clienty-diffy+ "px";
    function Getdiff (e) {diffobj = E.target;
    DIFFX = E.clientx-diffobj.offsetleft;
  Diffy = E.clienty-diffobj.offsettop;
      //Mouse down event function down (e) {if (Isinclude (E.clientx,e.clienty,oclick)) {Isclick = true;
      Clone click on the Trigger node Oclickclone=oclick.clonenode (TRUE);
    Calculates the offset of the mouse (if there is a margin) Getdiff (e);
      else {Getdiff (e);
      var child = Obox.childnodes; for (Var i=0 i < child.length; i++) {//Determine if mouse clicks are elements within the container, and cannot be placeholder div (if you do not add this placeholder div judge there will be bugs, for specific reasons not known) if
        (Isinclude (E.clientx,e.clienty,child[i]) && Child[i]!= oplace)
          {Isclick = true;
          Isincludebox = true;
 The effect that the clone element uses to drag Oclickclone = Child[i].clonenode (true);         The clone element is used to drop Oclickdown = Child[i].clonenode (true);
          Delete the element after pressing and use the move effect to show the element Obox.removechild (Child[i]);
          Movemagic (oclickclone,e);
          Insert placeholder div to get Obox.insertbefore (Oplace,child[i]);
          Flag = true;
        Break
      }}//mouse movement Event function Move (e) {if (Isclick) {movemagic (oclickclone,e); Determines whether the mouse is moved into the container internal if (Isinclude (E.clientx,e.clienty,obox)) {//child nodes in the calculation container var children = Obox.childn
        Odes;
        Once in, you can insert the placeholder div obox.insertbefore (oplace,child[0]) in the first position; Position the placeholder div for (var i = 0; i < child.length i++) {//because the placeholder div is unique, so you just have to judge it. F (E.clienty > Child[i].offsettop+child[i].offsetheight/2) {//Determine whether to drag to the end if (I!= chil
            d.length-1) Obox.insertbefore (oplace,child[i+1]);
          else Obox.appendchild (oplace);
    }    //Mouse Lift event function up (e) {Isclick = false;
    Lifting the mouse can remove the temporary drag effect element Document.body.removeChild (Oclickclone);
      If the element is placed inside the container if (Isinclude (E.clientx,e.clienty)) {var child = Obox.childnodes;
      Placeholder Div position Var insertplace; for (var i=0; i<child.length;i++) {//Determine the position of the placeholder div if (oplace = = Child[i]) {Obox.
          RemoveChild (Child[i]);
          Insertplace = i;
        Break
        }//Determine if multiple if (!bismany) {if (isincludebox) Ocreate = Oclickdown can be placed;
        if (insertplace==child.length) obox.appendchild (ocreate);
      else Obox.insertbefore (Ocreate,child[insertplace]);
        else {//can be placed multiple then need each clone the if (Isincludebox) var ocreateclone = Oclickdown;
        else var ocreateclone = Ocreate.clonenode (true); if (insertplace==child.length) Obox.appendchild (Ocreateclone);
        else {Obox.insertbefore (ocreateclone,child[insertplace]);
        }} else {if (Isincludebox) {var child = Obox.childnodes; for (var i=0 i<child.length; i++) {if (child[i] = = oplace) {Obox.removechild (
            Child[i]);
          Obox.insertbefore (Oclickdown,child[i]);
  }1}} Isincludebox = false;
  } document.addeventlistener (' MouseMove ', move);
  Document.addeventlistener (' MouseDown ', down);
Document.addeventlistener (' MouseUp ', up);
 }

Above this piece of pure JS can drag and drop a simple example of a form is to share the whole of the content of everyone, I hope to give you a reference, but also hope that we support the cloud-dwelling community.