JavaScript image magnifying glass (drag-and-drop, zoom effect) Page 1/4_javascript skills

A few days ago, I suddenly wanted to make a lens effect, and I suddenly thought of this effect, so I found out the code that was "treasured" and decided to give it a try.
Foreword:
This program is mainly divided into three parts: dragging and dropping layers, scaling layers, and cutting pictures (including preview).
Drag-and-drop of layers is a very common effect, scaling of layers is a bit difficult, and picture cutting looks dazzling but the principle is also very simple.
However, during the implementation process, I also learned a lot of things that I didn’t know before. I will explain them below. I hope everyone can learn something from them.
Principle:

[Drag-and-drop program]

The basic principle is very simple. If you don’t know, you can understand it by looking at the code. Related articles of Yue Rabbit and BlueDestiny are referenced.

Let’s talk about the more useful places:

[Range Limitation]

First of all, of course, there are drag and drop range parameters, which are mxLeft (minimum left value on the left), mxRight (maximum value of left on the right), mxTop (minimum value of top above), mxBottom (maximum value of top below).
Then check whether it is exceeded in the dragging program Move(). If it is exceeded, just set it back to the limit value:

Copy the code The code is as follows :

if(this.Limit){
//Get the excess length
var iRight = iLeft this._obj.offsetWidth - this.mxRight, iBottom = iTop this._obj.offsetHeight - this.mxBottom;
//Here, the right bottom is set first and then the left top, which may be inaccurate
if(iRight > 0) iLeft -= iRight;
if(iBottom > 0) iTop -= iBottom;
if(this.mxLeft > iLeft) iLeft = this.mxLeft;
if(this.mxTop > iTop) iTop = this.mxTop;
}

[Release Selection]
The method I used before was to set onselectstart of ie and MozUserSelect of ff.
But BlueDestiny said "Using user-select will be equivalent to event.preventDefault. Prevent default Actions will cause mouseup to be lost during certain operations. "
The best way is to use document.selection.empty() for ie and window.getSelection().removeAllRanges() for ff.
So you can add in Move():

window.getSelection && window.getSelection().removeAllRanges(); This writing method was learned from the program of Yue Rabbit.
Because IE’s mouse capture comes with this by default (as discussed below), so IE does not need it.
[Mouse capture]

I didn’t know that js had this thing before. It’s very simple to use:
Set capture: this.Drag.setCapture();
Cancel capture: this.Drag.releaseCapture ().
What it does is: Set mouse capture to the specified object. This object receives all mouse input for the current application or the entire system.
If you still don’t understand, try dragging the mouse outside the browser when dragging and dropping, and you will find that the dragging continues.
If there is no mouse capture, it will be invalid.
But mouseup cannot be triggered outside the browser, but you can also use the losecapture event instead:

addEventHandler(this.Drag, "losecapture", this._fS);
this.Drag. setCapture();
The program stops the event when adding blur to the ff window. Yuetu said it is to detect the loss of mouseup caused by alt tab. It is perfect and has been added.

This drag-and-drop program is complete.