JS drag-and-drop component learn to use _javascript skills

JS code need to write often, otherwise easy to unfamiliar, although recently has been looking at the prototype JS, behavior, such as delegation of knowledge points, but the amount of hand-written code has decreased slightly. This article and you share a drag-and-drop components for your reference, the specific contents are as follows

First, look at the principle of drag and drop.

Drag-and-drop element position change, the change in the left value is the mouse position in the horizontal direction of the change value, E.clientx-mouse button pressed when the E.clientx.
The change in the top value is the mouse position in the vertical direction of the change value, E.clienty-left mouse button pressed when e.clienty.
The other is to set the drag-and-drop range , up or down, not more than the parent element in the region.

  function Drag (config) {this.movetarget = document.getElementById (config.id);
        if (config.parentid) {this.targetparent = document.getElementById (Config.parentid);
        This.max_left = This.targetparent.clientwidth-this.movetarget.offsetwidth;
      This.max_top = This.targetparent.clientheight-this.movetarget.offsetheight; }else{Console.log (document.documentElement.clientHeight + "| |" + this.moveTarget.offsetHeight) this.max_l EFT = Document.documentelement.clientwidth-this.movetarget.offsetwidth-parseint (This.getstyle (document.body
        , "Border-width")); This.max_top = Document.documentelement.clientheight-this.movetarget.offsetheight-parseint (This.getStyle (doc
      Ument.body, "Border-width"));
    } This.lock = true; } Drag.prototype.getStyle = function (element, attr) {if (Element.currentstyle) {return element.currentsty
      LE[ATTR]; }else{return window.getcomPutedstyle (Element,null). GetPropertyValue (attr)}} Drag.prototype.moDown = function (e) {e = e | |
      Ow.event;
      This.clientx = E.clientx;
      This.clienty = E.clienty; When the mouse is pressed, the left value of the drag, the top value (written in style or CSS) This.startleft = parseint (This.moveTarget.style.left | | This.getstyle (this
      . Movetarget, "left");
      This.starttop = parseint (This.moveTarget.style.top | | this.getstyle (this.movetarget, "top"));
      Mouse when pressed, the mouse ClientX value, clienty value this.startclientx = E.clientx;
      This.startclienty = E.clienty;
    This.lock = false;
    };
      Drag.prototype.moMove = function (e) {e = e | | window.event;
      if (E.which!= 1) {This.lock = true; } if (!this.lock) {var realleft = this.startleft + e.clientx-this.startclientx;//actual move range var Realto
          p = this.starttop + e.clienty-this.startclienty; Rightleft, Righttop; Left, top value (within removable range) var rightleft = realleft > This.max_left? ThIs.max_left: (Realleft > 0 realleft:0); var righttop = realtop > This.max_top?
        This.max_top: (realtop > 0 realtop:0);
        This.moveTarget.style.left = rightleft + "px";
      This.moveTarget.style.top = righttop + "px";
    }
    };
      Drag.prototype.moUp = function (e) {e = e | | window.event;
    This.lock = true;
    }; Drag.prototype.startDrag = function () {Console.log (this) This.moveTarget.onmousedown = function (e) {This.modown (e)}.
      Bind (this);
      This.moveTarget.onmousemove = function (e) {this.momove (E)}.bind (this);
    This.moveTarget.onmouseup = function (e) {This.moup (E)}.bind (this); }

Description:modown response to the left mouse button press operation, momove response to Mouse movement operation, moup response to mouse lift operation.

In the momove added E.which judgment, E.which ==1 said the left mouse button press, this is to solve, the mouse can be dragged outside the range, and then moved back, without pressing the left button, drag elements will follow the move of the bug.

Instructions for use:

When used, the ID of the dragged element is a must parameter, the ID of the parent element (that is, the range that can be dragged and moved) is an optional parameter, and if the ID of the parent element is not passed, the documentelement is used as a drag-and-drop range by default.

If you pass the parent element, do not forget to set the parent element's positioning to position:relative or Position:absolute.

In use, the first introduction of the drag-and-drop plug-in js file.

<!doctype html>  

If you want to drag through the entire window, do not position the parent element of the dragged element so that it is positioned relative to the body.

If you need to locate the body, but you need to set the position of its parent element as not static, you can extend the plug-in.

I hope this article will help you learn the JavaScript programming.