Magnetic Adsorption Effect of javascript Animation: javascript magnetic Adsorption

Magnetic Adsorption Effect of javascript Animation: javascript magnetic Adsorption

Previous

In the previous article, we introduced the javascript animation's simulated drag-and-drop effect. However, in practice, it is often necessary to limit the range of drag-and-drop elements. By limiting the scope and adding some auxiliary measures, the magnetic adsorption effect can be achieved.

Limited scope

If we define that elements can only be moved within the visible range, we need to define the range.

First, we need to figure out that the visible area is limited to the drag element.

Left range L0 = 0

Right range R0 = document.doc umentElement. clientWidth

Top range: T0 = 0

Bottom range: B0 = document.doc umentElement. clientHeight

The top, bottom, left, and right sides of the element 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 want to restrict the range to the drag and drop elements, you need to change the range.

First, the conditions are not in the scope of execution, but not in the scope of execution.

The distance between the element and the Y axis in the upper-left corner of the visible area has been obtained in the drag-and-drop implementation. Therefore, you do not need to use offsetLeft and offsetTop to obtain the element 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; // obtain the element's distance from the X axis and Y axis of the parent level to var x0 = this. offsetLeft; var y0 = this. offsetTop; // obtain the distance between the mouse and the X axis and the Y axis from the upper left corner of the browser to var x1 = e. clientX; var y1 = e. clientY; // when you press the mouse, obtain the page area var L0 = 0; var R0 = document.doc umentElement. clientWidth; var T0 = 0; var B0 = document.doc umentElement. clientHeight; // when you press the mouse, obtain the element width and height var EH = obj. offsetHeight; var EW = obj. offsetWidth; document. onmousemove = function (e) {e = e | event; // obtain the x-axis and Y-axis distance from the mouse to the upper-left corner of the viewport x2 = e. clientX; y2 = e. clientY; // calculate the distance between the element and the Y axis in the upper-left corner of the view and var X = x0 + (x2-x1); var Y = y0 + (y2-y1 ); /****** range limit ******* // obtain the instantaneous value var L = X and var R = X + EW of the four sides of the element when the mouse moves; var T = Y; var B = Y + EH; // specify the range before assigning X and Y to left and top. // only when the range is specified, before moving. // if it is out of the left range, left is set to L0 if (L <L0) {X = L0;} // if it is out of the right range, left is set to R0 if (R> R0) {X = R0-EW;} // if it is out of the upper range, top is set to T0 if (T <T0) {Y = T0;} // if it is out of the lower range, the top value 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 raised and the drag ends, onmousemove is assigned null to document. onmousemove = null; // release Global Capture if (obj. releaseCapture) {obj. releaseCapture () ;}/// block default behavior return false; // IE8-the browser blocks default behavior if (obj. setCapture) {obj. setCapture () ;}} drag (test); </script>

Magnetic Adsorption

Magnetic adsorption only needs to be modified based on the limited range.

In the following code, as long as the four sides of the element are less than 50 px from the four sides of the visible area, the element will directly adsorbed 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; // obtain the element's distance from the X axis and Y axis of the parent level to var x0 = this. offsetLeft; var y0 = this. offsetTop; // obtain the distance between the mouse and the X axis and the Y axis from the upper left corner of the browser to var x1 = e. clientX; var y1 = e. clientY; // when you press the mouse, obtain the page area var L0 = 0; var R0 = document.doc umentElement. clientWidth; var T0 = 0; var B0 = document.doc umentElement. clientHeight; // when you press the mouse, obtain the element width and height var EH = obj. offsetHeight; var EW = obj. offsetWidth; document. onmousemove = function (e) {e = e | event; // obtain the x-axis and Y-axis distance from the mouse to the upper-left corner of the viewport x2 = e. clientX; y2 = e. clientY; // calculate the distance between the element and the Y axis in the upper-left corner of the view and var X = x0 + (x2-x1); var Y = y0 + (y2-y1 ); /****** magnetic adsorption ******* // obtain the instantaneous value var L = X and var R = X + EW of the four sides of the element when the mouse moves; var T = Y; var B = Y + EH; // specify the range before assigning X and Y to left and top. // only when the range is specified, before moving. // if it reaches the adsorption range on the left, left is set to L0 if (L-L0 <50) {X = L0 ;} // if it reaches the adsorption range on the right, left is set to R0 if (R0-R <50) {X = R0-EW;} // if it reaches the adsorption range on the top, set top to T0 if (T-T0 <50) {Y = T0;} // if it reaches the adsorption range on the right, set top to B0 if (B0-B <50) {Y = B0-EH;} obj. style. left = X + 'px '; obj. style. top = Y + 'px ';} document. onmouseup = function (e) {// when the mouse is raised and the drag ends, onmousemove is assigned null to document. onmousemove = null; // release Global Capture if (obj. releaseCapture) {obj. releaseCapture () ;}/// block default behavior return false; // IE8-the browser blocks default behavior if (obj. setCapture) {obj. setCapture () ;}} drag (test); </script>

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!