The magnetic adsorption effect of JavaScript animation _javascript tips

Front.

In the previous article, we introduced the JavaScript animation simulation dragging effect article. However, in practical applications, it is often necessary to limit the range of elements to be dragged. By limiting the range and adding some auxiliary measures, the effect of magnetic adsorption can be achieved.

Scope limit

If we qualify that the element can only be moved within the visual range, then it needs to be scoped

First, we need to make sure that the visual area limits the element being dragged

Left range L0 = 0

Right range R0 = Document.documentElement.clientWidth

Upper Side Range T0 = 0

Lower side range B0 = Document.documentElement.clientHeight

The top and bottom edges of the elements are

Left Side L = Offsetleft

Right side R = offsetleft + offsetwidth

Top Side T = offsettop

Bottom side B = offsettop + offsetheight

function Limitedrange (OBJ,FN) {
  var L0 = 0;
  var R0 = document.documentElement.clientWidth;
  var T0 = 0;
  var B0 = document.documentElement.clientHeight;
  var L = obj.offsetleft;
  var R = obj.offsetleft + obj.offsetwidth;
  var T = obj.offsettop;
  var B = obj.offsettop + obj.offsetheight;
  if (L >= L0 && R <= R0 && T >= T0 && B <= B0) {
    fn (obj);
  }
}

Drag range

If you limit the scope to dragging elements, you need some changes

First, the qualifying condition is not what is executed within the scope, but what should be done when it is not in scope

The distance between the x-axis and the y-axis of the upper-left corner of the visible region has been acquired in the drag implementation, so there is no need for offsetleft and offsettop to be retrieved again

<div id= "test" style= "height:100px;width:100px;background:pink;position:absolute;top:0;left:0;"
    > Test Text </div> <script> function drag (obj) {obj.onmousedown = function (e) {e = e | | | event;
    Gets the x-axis and y-axis distance of the element distance-locating parent var x0 = this.offsetleft;
    var y0 = this.offsettop;
    To obtain the mouse distance from the upper-left corner of the x-axis and the y-axis distance var x1 = e.clientx;
    var y1 = E.clienty;
    When the mouse is pressed, get at this time the page area var L0 = 0;
    var R0 = document.documentElement.clientWidth;
    var T0 = 0;
    var B0 = document.documentElement.clientHeight;
    When the mouse presses, obtains at this time the element wide high var EH = obj.offsetheight;
    var EW = obj.offsetwidth;
      Document.onmousemove = function (e) {e = e | | event;
      Get the X-axis and y-axis distance of the upper-left corner of the viewport at this time x2 = e.clientx;  
      y2 = E.clienty;
      Calculate the element at this time should be distance from the upper-left corner of the viewport x-axis and y-axis distance var x = x0 + (x2-x1);
      var Y = y0 + (y2-y1);
      /****** Range Limited *******///Get the instantaneous value of the four edges of the mouse when moving. var L = X;
      var R = X + EW;
      var T = Y;
      var B = Y + EH; Before assigning x and Y to left and top, range is limitedSet///only within range to move accordingly//if left range, leave L0 if (L < L0) {X = L0;}
      Left is R0 if (R > R0) {X = R0-ew if the right range is detached)
      If the upper range is detached, the top T0 if (T < T0) {Y = T0;}
      If the bottom range is detached, the top is B0 if (B > B0) {Y = B0-eh;}
      Obj.style.left = X + ' px ';
    Obj.style.top = Y + ' px ';
      } document.onmouseup = function (e) {//When the mouse is lifted, drag-and-drop ends, onmousemove is assigned null to Document.onmousemove = NULL;
      Releases the global Capture if (obj.releasecapture) {obj.releasecapture ();
    }//block default behavior return false;
    ie8-browser to block default behavior if (obj.setcapture) {obj.setcapture ();
}} drag (test); </script>

Magnetic adsorption

Magnetic adsorption only need to be on the basis of limited scope, make some modifications can be

The following code, as long as the four sides of the element, distance from the visual range of four to less than 50px, the element will be directly adsorbed on the corresponding edge

<div id= "test" style= "height:100px;width:100px;background:pink;position:absolute;top:0;left:0;"
    > Test Text </div> <script> function drag (obj) {obj.onmousedown = function (e) {e = e | | | event;
    Gets the x-axis and y-axis distance of the element distance-locating parent var x0 = this.offsetleft;
    var y0 = this.offsettop;
    To obtain the mouse distance from the upper-left corner of the x-axis and the y-axis distance var x1 = e.clientx;
    var y1 = E.clienty;
    When the mouse is pressed, get at this time the page area var L0 = 0;
    var R0 = document.documentElement.clientWidth;
    var T0 = 0;
    var B0 = document.documentElement.clientHeight;
    When the mouse presses, obtains at this time the element wide high var EH = obj.offsetheight;
    var EW = obj.offsetwidth;
      Document.onmousemove = function (e) {e = e | | event;
      Get the X-axis and y-axis distance of the upper-left corner of the viewport at this time x2 = e.clientx;  
      y2 = E.clienty;
      Calculate the element at this time should be distance from the upper-left corner of the viewport x-axis and y-axis distance var x = x0 + (x2-x1);
      var Y = y0 + (y2-y1);
      /****** Magnetic adsorption *******///Get the instantaneous value of the four edges of the mouse when moving, var L = X;
      var R = X + EW;
      var T = Y;
      var B = Y + EH; Before assigning x and Y to left and top, range is limitedSet///only within range, move//If the adsorption range is reached to the left, L0 if (L-l0 <) {X = L0;}
      If the adsorption range to the right is reached, the left is R0 if (R0-r <) {X = R0-ew;}
      If the upper adsorption range is reached, the top T0 if (T-t0 <) {Y = T0;}
      If the adsorption range to the right is reached, the top is B0 if (B0-b <) {Y = B0-eh;}
      Obj.style.left = X + ' px ';
    Obj.style.top = Y + ' px ';
      } document.onmouseup = function (e) {//When the mouse is lifted, drag-and-drop ends, onmousemove is assigned null to Document.onmousemove = NULL;
      Releases the global Capture if (obj.releasecapture) {obj.releasecapture ();
    }//block default behavior return false;
    ie8-browser to block default behavior if (obj.setcapture) {obj.setcapture ();
}} drag (test);
 </script>

Above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!